[ACCEPTED]-Jekyll Blog Post: Centering Images-styling
Here is a way to do it via kramdown:
{:refdef: style="text-align: center;"}
{: refdef}
This 2 will create another paragraph around the 1 paragraph added by kramdown. Source
I had to do the same in markdown on drupal and this 4 solution worked for me though.
I aligned 3 my images to the right by adding inline 2 CSS like this:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
For aligning your image to 1 the right or center, replace
<div style="text-align: right">
to
<div style="text-align: center">
Kramdown
Jekyll uses kramdown as a default markdown renderer.
kramdown allows 21 you to add additional attributes to the 20 original markdown-flavored image link like 19 below. (See here and here for the official syntaxes)
If 18 you are interested, you can check out the 17 working example from my blog post
Apply attributes directly to the img
{:style="display:block; margin-left:auto; margin-right:auto"}
Above will print 16 image centered.
Add user-defined css class for easier use
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
I personally adds above 15 code to my blog's css file and simply uses 14 like
{:.centered}
It is essentially the same as the first 13 codeblock, but much easier to use.
Apply attributes to the <p> tag
One other 12 way is to apply attributes to the <p> tag that 11 surrounds img. The advantage of this method 10 is that you can center multiple images (as 9 long as they are on the same paragraph).
{:style="text-align:center;"}
Add user-defined css class for easier use
.text-align-center {
text-align: center;
}
Once 8 again you may put above code into your css 7 file and use it like below.
{:.text-align-center}
EDIT: It just 6 crossed my mind if you wants ALL image to be 5 centered by default, adding
img {
display: block;
margin-left: auto;
margin-right: auto;
}
to your css file 4 may works for you. But note that I have 3 not tested deeply enough to find out any 2 unwanted side effects. So use it at your 1 own rist.
This should work if you add display: block to your style 1 so that margin-left: auto and margin-right:auto have the expected effect:
ul#posts > li > div.post-content > p > img {
display: block;
margin: 0 auto;
max-height: 80%;
max-width: 100%;
}
This simple code works for me.
<p align="center"">
<img src="/default/image/sample.png" width="100%" />
</p>
0
{: style="display:block; margin-left: auto; margin-right: auto;"}
0
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.