[ACCEPTED]-Jekyll Blog Post: Centering Images-styling

Accepted answer
Score: 38

Here is a way to do it via kramdown:

{:refdef: style="text-align: center;"}
![My Image]({{ site.baseimg }}/images/example1.png)
{: refdef}

This 2 will create another paragraph around the 1 paragraph added by kramdown. Source

Score: 5

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">


<div style="text-align: center">

Score: 4


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

![placeholder](https://via.placeholder.com/100x150){:style="display:block; margin-left:auto; margin-right:auto"}

Above will print 16 image centered. enter image description here

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


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).


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.


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.

Score: 1

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%;
Score: 1

This simple code works for me.

<p align="center"">
   <img src="/default/image/sample.png" width="100%" />


Score: 0
{: style="display:block; margin-left: auto; margin-right: auto;"}


More Related questions