Question

如何使用以下结构将div中的文本居中对齐：

.centerText {
    position: absolute;
    left: 100px;
    top: 20px;
    text-align: center;
    font-size: 25px;
}

<div class="centerText">Hello World</div>

这样做仍然将文本对齐到左侧;从左边100px。

Answer 1

试试这个。

.centerText {
    position: absolute;
    left: 50%;
    top: 20px;
    font-size: 25px;
    transform: translate(-50%);
}

<div class="centerText">Hello World</div>

Answer 2

要在仍然使用x.replace(/<span.*>(.*)<\/span>/g, '$1'); x.replace(/<span.*>/g, '');时让文字居中，您需要添加left: 100px以自动设置div的宽度，并在两侧保留相同的间距，从而使div居中。< / p>

＆＃13;

right: 100px

＆＃13;

.centerText {
    position: absolute;
    left: 100px;
    right: 100px;
    top: 20px;
    text-align: center;
    font-size: 25px;
}

＆＃13;

Answer 3

要将文本或元素置于div内，它必须具有更大的宽度，

看看：calc() https://www.w3schools.com/cssref/func_calc.asp

您可以根据页面（动态）设置div的宽度，然后从左侧移除100px（从右侧移除另一个100px，这样div就会居中，text也是text-align:center）

＆＃13;

.centerText {
    position: absolute;
    left: 100px;
    top: 20px;
    text-align: center;
    font-size: 25px;
    background: red;
    width: calc(100% - 200px);
}

＆＃13;

<div class="centerText">Hello World</div>

＆＃13;

如何使用位置绝对和左偏移水平居中文本Div

3 个答案: