Jekyll 博客文章：图像居中

Question

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

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

Jekyll 的博客生成器（来自 Markdown）似乎将图像包装在 <p></p> 标签中，因此 margin: 0 auto 不会使图像居中。我在下面附上了代码sn-ps：

<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

Answer 2

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

我通过添加这样的内联 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 3

克拉姆当

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

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

如果您有兴趣，可以查看我的blog post 中的工作示例

直接将属性应用到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 文件中，并简单地使用 like

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

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

将属性应用于<p> 标记

另一种方法是将属性应用到img 周围的<p> 标记。这种方法的优点是可以将多张图片居中（只要它们在同一个段落中）。

{: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)

编辑：如果您希望 ALL 图像默认居中，我就想到了，添加

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

到您的 css 文件可能对您有用。但请注意，我没有进行足够深入的测试以找出任何不需要的副作用。因此，您可以自己使用它。

Answer 4

如果您将display: block 添加到您的样式中，这应该可以工作，以便margin-left: auto 和margin-right:auto 具有预期的效果：

ul#posts > li > div.post-content > p > img {
  display: block;
  margin: 0 auto;
  max-height: 80%;
  max-width: 100%;
}

Answer 5

这个简单的代码对我有用。

<p align="center"">
   <img src="/default/image/sample.png" width="100%" />
</p>

Answer 6

由于您将图像包裹在一组 p 标签中，您可以简单地将这些 p 标签设置为 text-align: center;最好给这些 p 标签一个类，这样您就不会弄乱页面上的任何其他 p 标签。希望对您有所帮助！

Codepen：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; }

Answer 7

实现水平居中的方法有很多

1.

.container-to-be-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: "fixed width here"
}

2.

.parent-container {
  text-align: center;
}
.child-container-to-be-centered {
  display:inline-block;
}

3.

.container-to-be-centered {
  position: absolute;
  left: 50%;
  margin-left: "negative value of the container width"
}

等等

所以在这种情况下，将图像居中

<p>
  <img>
</p>

p {
  text-align: center;
}
img {
  display: inline-block;
}