将文本居中放置在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;，这是一个块元素<div>。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;