title: Jekyll Blog Post: Centering Images
body: <p>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. </p>
  
  <p>I have the text, etc. left-aligned, but now I'm struggling to get the image (who has a CSS style of <code>max-height: 80%</code>) to be centered as well. </p>
  
  <p>It appears that Jekyll's blog generator (from Markdown) wraps images in <code>&lt;p&gt;&lt;/p&gt;</code> tags so <code>margin: 0 auto</code> doesn't center the image. I've attached code snippets below:</p>
  
  <pre><code>&lt;li&gt;
      &lt;h2 class="post-title"&gt;Hello World&lt;/h2&gt;
      &lt;div class="post-date"&gt;&lt;span&gt;May 21, 2014&lt;/span&gt;&lt;/div&gt;
      &lt;div class="post-content"&gt;
          &lt;p&gt;&lt;img src="/images/photos/blog/hello-world.jpg" alt="blog-image"&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  
  ul#posts {
    list-style-type: none;
    margin: 0 auto;
    width: 60%;
  }
  
  ul#posts &gt; li {
    margin-bottom: 35px;
    text-align: center;
  }
  
  ul#posts &gt; li div.post-content {
    text-align: left;
  }
  
  ul#posts &gt; li &gt; div.post-date {
    color: #A0A0A0;
    font-style: italic;
    margin-bottom: 15px;
  }
  
  ul#posts &gt; li &gt; div.post-content &gt; p &gt; img {
    margin: 0 auto;
    max-height: 80%;
    max-width: 100%;
  }
  </code></pre>
  
  <p>How can I center the image in the blog post?</p>