如何在不影响图像的情况下将文本保留在中间？ CSS。 （WordPress的）

Question

这是my site它是在wordpress上，我希望将文本（文章）保留在中心，以便人们更容易阅读。

我使用填充，将文本推到中心。

.article-body-wrap {
padding-left:275px;
}

div[itemprop="articleBody"] p {
    font-size: 16px;
    line-height: 1.6em;
}

这两个人完成了这项工作，但由于填充，我无法获得更宽的图像。

我尝试过使用它，

.attachment_12210{
padding-left: 10px !important;
}

但它没有帮助。如何将文本保留在中间，但要确保图像宽且足够大？像Medium.com

这样的东西

Answer 1

解决问题的方法有很多种。

我可能会在文本周围创建一个div，定义div的位置并为文本提供属性 text-align：center; 然后定义div的宽度以始终保持居中。

阅读更多内容： https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

/ S

Answer 2

你在哪里

<section class="article-body-wrap"></section>

您的CSS适用于整个部分。因此，您应用于该部分的任何填充都将影响部分标记内的任何图像。

<section class="article-body-wrap">
    <div class="container">
        <p>...</p>
    </div>
    <div class="imgDiv">
       <img src="">
    </div>
    <div class="container">
       <p>...</p>
    </div>
</section>

看看这个小提琴：https://jsfiddle.net/x50bykk8/

article-body-wrap将您的文本对齐。

.container将填充应用于文本。

您的图片位于容器元素之外，因此不必与文本元素的宽度相同。