如何从坐标/点水平居中对齐文本

Question

CSS text-align: center;属性可以将文本对齐。

但是，如果您希望文本以点为中心，该怎么办？就像在画布上一样？

在画布上执行此操作时，只需将文本放在坐标处并将其textAlign属性设置为居中。

以下是如何在普通的html div中执行此操作...

Answer 1

如果您希望文字以点50%, 200px为中心，请按以下步骤操作：

HTML：

<div id="div1"> This text is centered at 50%, 200px </div>

CSS：

#div1 {
    position: absolute;
    text-align: center;
    top: 200px;
    left: 0px;

    width: 100vw;
    height: 100px; /* height of text */
}

可选：pointer-events: none; /* this prevents pointer events, so divs behind it are clickable. */

如果您想要一个不同的点，请将CSS设置为以下内容：

屏幕顶部的

top: px  ;

left: 0px;

width:（屏幕左侧的px或百分比）* 2 ;

height: px for height ;