时间戳

首页 > 解决方案 > 如何使用css中的calc（）函数使文本居中

html - 如何使用css中的calc（）函数使文本居中

问题描述

我正在制作一个需要一些文本居中的精美页面，但我无法使用它，text-align: center;因为我有一个position: absolute;. 所以现在我需要能够使用 calc() 函数将文本水平居中（也因为我想用它做一些其他花哨的东西）。

这是我尝试过但没有奏效的方法：CSS：


#center {
    position: absolute;
    margin-left:calc(100vw /2 - attr(length) /2);
}

HTML：

[...]

<div id="center">test</div>

[...]

如上所示，我尝试使用 attr()，但我不知道要放入哪个值来获得我想要的东西（事实上 Firefox 拒绝让它工作）

在答案中，请考虑文本会即时更改。文本应始终居中。

希望你能理解并能提供帮助

标签： htmlcss

解决方案

你可以试试这个。希望对您有所帮助。

#center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
<div id="center">test</div>

推荐阅读