在 Ghost 主题中居中 img答案

【问题标题】：Centering img in Ghost theme在 Ghost 主题中居中 img
【发布时间】：2017-05-13 19:15:13
【问题描述】：

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

这里是保存图像的主要 CSS 元素，当我将 img 中的最大宽度更改为 150 时，我可以将图像设置为全宽（我使用 1100 像素宽的图像） % 但它不是这样居中的，它有点向右浮动。

我为此模拟了粗糙的 jsfiddle - https://jsfiddle.net/zbsa7ech/

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

我设法获得所需结果的唯一方法是将最大宽度设置为 200% 和 margin-left: -254px

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

【问题讨论】：

标签： html css image ghost-blog ghost

【解决方案1】：

您可以从“主”元素中删除宽度约束，并将其应用于段落，而 img 不受约束。

CSS：

body {
    margin: 0;
    color: #283037;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6;
}


.container {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 112rem;
    margin: 0 auto;
    padding: 0 2rem;
}


.site-main {
    width: 100%;

    margin: 0 auto;
}
.wrapper {
    max-width: 60rem;
    margin: 0 auto;
}


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

HTML：

<body>
<div class="container">

<header class="site-header"></header>

<main class="site-main wow fadeIn">

<p class='wrapper'>The Southern Railway (SR) gave the designation Sub to the wide variety of electric multiple units that were used on inner-suburban workings in the South London area. Originally these units were formed as three-car units, but in the 1940s, all surviving units were increased to four cars by the addition of an 'Augmentation' trailer. New four-car units were also built at this time, and these survived in passenger use until late 1983, by which time British Rail had allocated to them TOPS Class 405.</p>

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

<p class='wrapper'>The Southern Railway (SR) gave the designation Sub to the wide variety of electric multiple units that were used on inner-suburban workings in the South London area. Originally these units were formed as three-car units, but in the 1940s, all surviving units were increased to four cars by the addition of an 'Augmentation' trailer. New four-car units were also built at this time, and these survived in passenger use until late 1983, by which time British Rail had allocated to them TOPS Class 405.</p>

</main>
</div>
</body>

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

【讨论】：

【解决方案2】：

你可以像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;
}

【讨论】：