css - Jekyll 博客文章 : Centering Images

Question

假设您有一个使用 Jekyll 的博客站点，并且博客文章位于页面的中心。我希望内容(即段落、单词、代码等)向左对齐，但图像居中。

我有文本等左对齐，但现在我正在努力使图像(具有 max-height: 80% 的 CSS 样式)也居中。

Jekyll 的博客生成器(来自 Markdown)似乎将图像包装在 <p></p> 中标记所以 margin: 0 auto不居中图像。我在下面附上了代码片段:

<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%;
}

如何使博文中的图片居中？

Answer 1

这是一种通过 kramdown 实现的方法:

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

这将围绕 kramdown 添加的段落创建另一个段落。 Source