Jekyll博客文章:居中图像

Question

假设您有一个带有Jekyll的博客站点,并且博客帖子位于页面的中心.我希望内容(即段落,单词,代码等)与左对齐,但图像要居中.

我有文本等左对齐,但现在我正在努力使图像(谁具有CSS样式max-height: 80%)也在中心.

似乎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添加的段落周围创建另一个段落.资源

Answer 2

克拉姆当

Jekyll使用kramdown作为默认的 Markdown 渲染器。

kramdown允许您向原始 Markdown 风格的图像链接添加其他属性，如下所示。（官方语法请参见此处和此处）

如果您有兴趣，可以查看我的博客文章中的工作示例

直接将属性应用到img

![placeholder](https://via.placeholder.com/100x150){:style="display:block; margin-left:auto; margin-right:auto"}

上面将打印图像居中。

添加用户定义的css类以方便使用

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

我个人将上面的代码添加到我的博客的 css 文件中，并简单地使用像

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

它本质上与第一个代码块相同，但更易于使用。

将属性应用到<p>标签

另一种方法是将属性应用于<p>周围的标签img。此方法的优点是您可以将多个图像居中（只要它们位于同一段落上）。

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

添加用户定义的css类以方便使用

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

您可以再次将上面的代码放入您的 css 文件中并像下面一样使用它。

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

编辑：如果您希望所有图像默认居中，我刚刚想到，添加

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

您的 css 文件可能适合您。但请注意，我还没有进行足够深入的测试来找出任何不需要的副作用。因此，使用它需要您自担风险。

Answer 3

我必须在 drupal 的降价中做同样的事情，但这个解决方案对我有用。

我通过添加这样的内联 CSS 将我的图像向右对齐：

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

要将图像与右侧或中心对齐，请替换

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

到

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

Answer 4

由于您的图像包含在一组 p 标签中，因此您只需将这些 p 标签设置为 text-align: center; 最好为这些 p 标签指定一个类，这样就不会弄乱页面上的任何其他 p 标签。希望有帮助！

代码笔： 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; }