Jekyll Blog Post: Centering Images

Question

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?

Answer 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