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

Answer 2

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

我通过添加如下内联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

如果您为自己的样式添加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 4

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

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

Answer 5

由于您的图像包含在一组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 6

有很多方法可以实现水平居中

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

Jekyll博客文章：居中图像

6 个答案: