使用HTML中的类将彩色字母文本居中

Question

我正在尝试使用html和css更改句子中每个字母的颜色。我做了一些研究，发现了这个：

对于html和css，我写了这个：

.green {
  Font-size: 20px;
  Color: #0F3;
  Text-align: center;
}

<a class=green> H </a>

现在它工作正常但由于某种原因，即使css代码是正确的，文本也不会居中。有人有任何想法吗？

Answer 1

您只能将块级元素居中。

为什么？

想象一下，您的text-align:left; .green标记旁边有a正常文字，text-align:center;，display:block。这是怎么回事？

因此，元素需要显示为要居中的块级元素。

如何？

在.green样式中加入.green { font-size:20px; color:#0F3; text-align:center; display:block; }规则，它应该有效：

<a class="green">H</a>

var modalImg = document.getElementById("img" + imgIdNumber);
etc...

Answer 2

父元素应该以文本为中心！

<p style="text-align: center">
    <span class="color">....</span>
    <span class="color">....</span>
    <span class="color">....</span>
    ...
</p>