如何替换文本对齐：-webkit-center？

Question

不推荐使用 webkit CSS 属性，因为它是非标准化的。重构一些代码我发现我在 CSS:

中使用 text-align: -webkit-center

.wrap-block {
    text-align: -webkit-center;
}

为了使一些文本块居中：

p {
    max-width: 200px;
    text-align: justify;
}

在类似于这个的结构中：

<div class="main-block">
    <div class="wrap-block">
        <p>Some random text</p>
        <img ... />
        <p>...</p>
        <blockquote>Unlimited width for this</blockquote>
        <p>...</p>
    </div>
</div>

This fiddle 显示示例。

如何摆脱这个 webkit 属性？如何使用标准 HTML 或 CSS 进行替换？

Answer 1

来自the MDN documentation：

The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.: margin:auto; or margin:0 auto; or margin-left:auto; margin-right:auto;

所以：

.wrap-block {
    text-align: center;
}

.wrap-block p,
.wrap-block blockquote {
    margin-left: auto;
    margin-right: auto;
}

Answer 2

如果你can/want要使用flexbox，你也可以使用下面的方法。

display: flex;
justify-content: center;

如何替换文本对齐：-webkit-center？

How to replace a text-align: -webkit-center?

html

css

webkit