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

我该如何在博客文章中居中图片？

- Andrew Tat

---

还会有其他 <p> 标签中的文本，我不希望那些文本居中显示。 - Andrew Tat

Answer 1

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

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

这将在kramdown添加的段落周围创建另一个段落。 来源

- wtjones

Answer 2

Kramdown

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

kramdown 允许您向原始的 markdown-flavored 图片链接添加其他属性，如下所示。（有关官方语法，请参见此处和此处）

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

直接将属性应用到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>标签应用属性

另一种方法是将属性应用于围绕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)

编辑：我突然想到，如果您希望默认情况下所有图像都居中显示，可以添加以下内容：

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

在你的css文件中添加此代码可能会对你有所帮助。但请注意，我尚未深入测试以发现任何不良副作用。因此，请自行承担使用风险。

- Lazy Ren

Answer 3

我曾在Drupal中使用Markdown做同样的事情，这个解决方案对我奏效了。

我使用内联CSS将图片向右对齐，代码如下：

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

要将您的图像对齐到右侧或中心，请替换

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

to

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

- Zuha Karim

Answer 4

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

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

- High Performance Rangsiman

Answer 5

如果您在样式中添加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%;
}

- Andreas Veithen

Answer 6

{: style="display:block; margin-left: auto; margin-right: auto;"}

- Duarte

Answer 7

既然您将图像包装在一组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; }

- Travo100

---

有没有办法在Markdown中设置HTML标签类？ - Andrew Tat

很抱歉，我无法帮助你，因为我从未使用过Markdown。您可以使用jQuery / Javascript为HTML元素设置类。如何教程：http://www.mkyong.com/jquery/how-to-add-remove-css-class-dynamically-in-jquery/ - Travo100

你可以为Markdown中的元素设置类，但这取决于你使用的Markdown处理器。这里有一个关于在Kramdown处理器中使用类的SO帖子：https://dev59.com/-3NA5IYBdhLWcg3wZ8_U - nicksuch

这里有一个要点，展示了类似于你的 .md 和 .html 文件的东西：https://gist.github.com/nicksuch/5c3d6b2da80bd7a3952e - nicksuch

Answer 8

实现水平居中有很多方法

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

- Chihung Yu

---

有没有一种方法只让包含<img>的段落居中？我不想让每个段落标签的内容都居中。 - Andrew Tat

你可以在 p 标签周围包裹一个容器：<div class="text-center"><p><img></p></div>并使用它来居中图片，而不是依赖于 p 来居中。 - Chihung Yu