html - 在 span 标签中居中文本

Question

我试图在它所在的 div 的上下文中将文本居中。我想要:

我有:

#previewOnlyWarning span{color: white; text-align: center; font-weight: bold; font-size: 150%; left: 37%; top: 0.8%;}
#previewOnlyWarning {position:absolute; top: 0%; left: 35%; width: 25%; height: 4.5%; background: #ff0000; display:block; z-index: 1100}

在模板中这个站点处于最高级别，兄弟元素到高元素，当然是最高的 z-index:

<div id="previewOnlyWarning"><span>FOR PREVIEW ONLY<br><br>
                                Do not distribute links from this site.</span>
</div>

我明白了:

这些图片在页面右侧缺失了大约 1/3，但显示了重点。当我在 p 标签中有文本而不是在一个 span 中时，它位于较低的位置(它上面的红色空间)并且很难看。我怎样才能使这个已经有 text-align:center 的文本居中？谢谢

Answer 1

<span>是行内元素，宽度由它包含的内容决定，所以text-align没有任何影响。

你可以设置text-align:center;在容器上，这是一个 block 元素 <div> .

#previewOnlyWarning {
  background: silver;
  text-align: center;
}
#previewOnlyWarning span {
}

<div id="previewOnlyWarning">
  <span>FOR PREVIEW ONLY<br><br> Do not distribute links from this site.</span>
</div>

或设置span{display:block;}使其占据容器宽度。

#previewOnlyWarning {
  background: silver;
}
#previewOnlyWarning span {
  display: block;
  text-align: center;
}

<div id="previewOnlyWarning">
  <span>FOR PREVIEW ONLY<br><br> Do not distribute links from this site.</span>
</div>