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：

以块为中心的标准兼容方式本身而不居中其内联内容是将左右边距设置为自动，例如： 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;

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

2 个答案: