Question

我在Ghost上使用免费的Starter主题，我尝试使图像居中但比段落和主要元素（60rem）更宽。

以下是将图像保持在原位的主要CSS元素，当我将 img 中的最大宽度更改为150时，我可以将图像调整为全宽（我使用1100px宽图像）％但是它不是那样集中的，它有点漂浮在右边。

我嘲笑粗略的jsfiddle - https://jsfiddle.net/zbsa7ech/

img {
display: inline-block;
max-width: 100%;
min-height: 0;
height: auto;
vertical-align: middle;
border-radius: 5px;
}

我设法获得所需结果的唯一方法是将最大宽度设置为200％并将边距保持为：-254px

任何简单地将图像放在容器中心而不使用负边距的解决方案？

Answer 1

您可以在段落标记中添加一个类，例如fiddle

<p class="img-container"><img src="https://i.sli.mg/DZAkY8.jpg" alt=""></p>

CSS

.img-container{
 display:flex;
 justify-content:center;
}

img {
 display: inline-block;
 max-width: 200%;
 min-height: 0;
 height: auto;
 vertical-align: middle;
 border-radius: 5px;
}

Answer 2

您可以从'main'元素中删除宽度约束，然后将其应用于段落，使img不受约束。

CSS：

cut

HTML：

   --print-long-lines
          Print matches on very long lines (> 2k characters by default).

Codepen：http://codepen.io/mwilkins91/pen/vyoeGg?editors=1100

在Ghost主题中居中img

2 个答案: