将绝对定位的基于变量的标题居中

Question

好吧，我有一个页面，它的标题总是根据登录的人而改变（他们的名字就是页面的标题）。然而，由于名称总是会有所不同，这意味着它需要通过文本的中心定位，以便它会向两侧水平扩展。我不确定如何解决这个问题，但由于标题 none 的可变长度，我尝试了一些方法，这些建议已经被淘汰。因此，为了让您了解我在代码方面的基础知识：

#profteamName{
position:absolute;
text-align:center;
top:220px;
left: 550px;
color: white;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
text-decoration:underline;

我不反对使用相对定位。只要能横向展开就好了

（更喜欢使用绝对定位长话短说，但我会尽我所能）

谢谢你们的时间。

Answer 1

不要将 div 从页面左侧定位，而是使用 width:100%; 将其拉伸到整个 window（或页面上的容器 div） .它将占据整个宽度并将文本对齐 - 无论长度如何 - 在 div.

的中间

CSS

.header {
  position:absolute;
  text-align:center;
  top:50px;
  width:100%;  /* take the width of the window or container div */
  /* rest of your code */
}

这里有一个CodePen mockup你可以玩。

将绝对定位的基于变量的标题居中

Centering a variable based title that is positioned absolutely

css

variables

header