如何替换text-align:-webkit-center？

Question

由于非标准化,因此不建议使用webkit CSS属性.重构一些我发现我text-align: -webkit-center在CSS中使用的代码:

.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>

这个小提琴就是一个例子.

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

Answer 1

从MDN文档:

该标准兼容的方式居中块本身无定心其内嵌的内容是设置左右边距为auto,例如: margin:auto;或margin:0 auto;或 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

如果您可以/想要使用 flexbox，您也可以使用以下内容。

display: flex;
justify-content: center;