'Jekyll Blog Post: Centering Images

Say you have a blog site with Jekyll and the blog posts are centered on the page. I want content (i.e. paragraphs, words, code, etc.) to be aligned to the left, but images to be centered.

I have the text, etc. left-aligned, but now I'm struggling to get the image (who has a CSS style of max-height: 80%) to be centered as well.

It appears that Jekyll's blog generator (from Markdown) wraps images in <p></p> tags so margin: 0 auto doesn't center the image. I've attached code snippets below:

<li>
    <h2 class="post-title">Hello World</h2>
    <div class="post-date"><span>May 21, 2014</span></div>
    <div class="post-content">
        <p><img src="/images/photos/blog/hello-world.jpg" alt="blog-image"></p>
    </div>
</li>

ul#posts {
  list-style-type: none;
  margin: 0 auto;
  width: 60%;
}

ul#posts > li {
  margin-bottom: 35px;
  text-align: center;
}

ul#posts > li div.post-content {
  text-align: left;
}

ul#posts > li > div.post-date {
  color: #A0A0A0;
  font-style: italic;
  margin-bottom: 15px;
}

ul#posts > li > div.post-content > p > img {
  margin: 0 auto;
  max-height: 80%;
  max-width: 100%;
}

How can I center the image in the blog post?

cssstyling


Solution 1:[1]

Here is a way to do it via kramdown:

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

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

Solution 2:[2]

I had to do the same in markdown on drupal and this solution worked for me though.

I aligned my images to the right by adding inline CSS like this:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

For aligning your image to the right or center, replace

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

to

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

Solution 3:[3]

Kramdown

Jekyll uses kramdown as a default markdown renderer.

kramdown allows you to add additional attributes to the original markdown-flavored image link like below. (See here and here for the official syntaxes)

If you are interested, you can check out the 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 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 code to my blog's css file and simply uses like

![placeholder](https://via.placeholder.com/100x150){:.centered}

It is essentially the same as the first codeblock, but much easier to use.

Apply attributes to the <p> tag

One other way is to apply attributes to the <p> tag that surrounds img. The advantage of this method is that you can center multiple images (as long as they are on the same paragraph).

{:style="text-align:center;"}
![placeholder](https://via.placeholder.com/100x150)
![placeholder](https://via.placeholder.com/100x150)

Add user-defined css class for easier use

.text-align-center {
  text-align: center;
}

Once again you may put above code into your css file and use it like below.

{:.text-align-center}
![placeholder](https://via.placeholder.com/100x150)
![placeholder](https://via.placeholder.com/100x150)

EDIT: It just crossed my mind if you wants ALL image to be centered by default, adding

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

to your css file may works for you. But note that I have not tested deeply enough to find out any unwanted side effects. So use it at your own risk.

Solution 4:[4]

This should work if you add display: block to your style 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%;
}

Solution 5:[5]

This simple code works for me.

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

Solution 6:[6]

Since you have your image wrapped in a set of p tags you can simply set those p tags to text-align: center; It would most likely be best to give those p tags a class so you don't mess up any other p tags on the page. Hope that helps!

Codepen: http://codepen.io/Travo100/pen/tJCBH

<p class="image-center"><img src="/images/photos/blog/hello-world.jpg" alt="blog-image"></p>

.image-center { text-align: center; }

Solution 7:[7]

There are many ways to achieve horizontal centering

1.

.container-to-be-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: "fixed width here"
}

2.

.parent-container {
  text-align: center;
}
.child-container-to-be-centered {
  display:inline-block;
}

3.

.container-to-be-centered {
  position: absolute;
  left: 50%;
  margin-left: "negative value of the container width"
}

etc.

So in this case to center your image

<p>
  <img>
</p>

p {
  text-align: center;
}
img {
  display: inline-block;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wtjones
Solution 2 Zuha Karim
Solution 3
Solution 4 Andreas Veithen
Solution 5 High Performance Rangsiman
Solution 6
Solution 7 Chihung Yu

Related Questions