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?
Solution 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:
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">