文本未以 HTML 页面为中心 [重复]答案

【问题标题】：Text is not being centered on HTML page [duplicate]文本未以 HTML 页面为中心 [重复]
【发布时间】：2023-04-02 17:27:01
【问题描述】：

我在tactiletimes.org 有一个网站，并且下面的代码不会使结果文本居中。

如果您对为什么会发生这种情况有任何想法，请告诉我。我已经看过类似的问题，但它们并没有解决我的问题。

<span style="text-align: center; border:5px; border-radius:10px; font-size:120px; border-style:dotted; border-color:blue">
  <b>The Tactile Times</b>
  <br/>
  <span style="font-size:25px;">A newspaper by young braillists, for young braillists</span>
</span>

【问题讨论】：

@firefields 我已经为 OP 排序了
使用 div 代替 span。
感谢您的帮助。如您所见，我对 CSS 很陌生。

标签： html css

【解决方案1】：

span 是内联元素，默认不居中。

使用块级元素作为包装器。

<div style="text-align: center; border:5px; border-radius:10px; font-size:50px; border-style:dotted; border-color:blue">
  <b>The Tactile Times</b>
  <br/>
  <span style="font-size:25px;">A newspaper by young braillists, for young braillists</span>
</div>

【讨论】：

【解决方案2】：

文本位于默认内联的跨度中。您可以将跨度切换为 div，也可以将跨度设置为 display:block，如下所示

<span style="text-align: center; border:5px; border-radius:10px; font-size:6px; border-style:dotted; border-color:blue; display:block;">
  <b>The Tactile Times</b>
  <br/>
  <span style="font-size:25px;">A newspaper by young braillists, for young braillists</span>
</span>

【讨论】：