如何替换文本对齐方式:-webkit-center? [英] How to replace a text-align: -webkit-center?

问题描述

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

The use of webkit CSS properties is not recommended due the non-standarized. Refactoring some code I've found I'm using a text-align: -webkit-center in my CSS:

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

为了使文本的某些部分居中:

in order to center some blocks of text:

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替换?

How to get rid of this webkit property? How to replace using standard HTML or CSS?

推荐答案

来自 MDN文档:

不使居中内容居中而使居中居中的标准兼容方式是将左右边距设置为自动，例如: margin:auto; 或 margin:0 auto; 或 margin-left:auto;margin-right:auto;

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;
}

这篇关于如何替换文本对齐方式:-webkit-center?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！