html - 居中的字母行

我试图弄清楚如何使字母排成一行，每个字母都有自己的元素。例如，我要这样做：

<div className="active__header">
  <h3 className="header__letter">H</h3>
  <h3 className="header__letter">E</h3>
  <h3 className="header__letter">L</h3>
  <h3 className="header__letter">L</h3>
  <h3 className="header__letter">O</h3>
</div>

看起来好像只是：

<h3>HELLO</h3>

我尝试在所有字母上使用float: left，这使它们全部位于同一行，但是text-align: center不起作用，因此字母没有居中。

最佳答案

注意：没有className属性，请将其更改为class。

您可以将display的h3从默认的block更改为inline，这将允许您使用text-align: center：

.active__header {
  text-align: center;
}

.header__letter {
  display: inline;
}

<div class="active__header">
  <h3 class="header__letter">H</h3>
  <h3 class="header__letter">E</h3>
  <h3 class="header__letter">L</h3>
  <h3 class="header__letter">L</h3>
  <h3 class="header__letter">O</h3>
</div>

这种方法的唯一问题是，使用inline时，空格很重要，并转换为单个空格，因此您将在字母之间看到一个空格。如果要删除它，请删除h3标记之间的空白。有几种方法可以做到这一点，其中一种是断开标记内的行：

.active__header {
  text-align: center;
}

.header__letter {
  display: inline;
}

<div class="active__header">
  <h3 class="header__letter">H</h3><h3
      class="header__letter">E</h3><h3
      class="header__letter">L</h3><h3
      class="header__letter">L</h3><h3
      class="header__letter">O</h3>
</div>

或者，您可以使用弹性框：

.active__header {
  display: flex;
  justify-content: center;
}

<div class="active__header">
  <h3 class="header__letter">H</h3>
  <h3 class="header__letter">E</h3>
  <h3 class="header__letter">L</h3>
  <h3 class="header__letter">L</h3>
  <h3 class="header__letter">O</h3>
</div>