html - 居中文本不起作用

Question

从我所有的搜索来看，我似乎使用了正确的技术，但居中并没有发生。

这是我的 .html 文件中的代码块:

    <div id="section-movement" class="section-container">
        <div class="section-title">
            Movement <span class="center">*click entries for more details*</span><span class="float-right">limited by movement speed</span>
        </div>
    </div>

这是我的 .css 文件中的条目:

.center {
    text-align: center;
}

.float-right {
    float: right;
}

输出应该是单词“movement”左对齐，文本“click entries for more details”应该居中，文本“limited by movement speed”应该右对齐。左侧和右侧文本工作正常，但“单击条目以获取更多详细信息”文本未居中，它紧跟在“移动”文本之后。

Answer 1

span是一个 inline默认情况下的元素。您使用居中的方式是内部 span元素，它不做任何事情，因为它是内联的。

您可以使用 <div> s 而不是 <span> s，它们是 block 元素(默认宽度:100%)，但我不知道这是否是您想象的 - 在您当前的代码中，您试图将一些基本上是文本段落一部分的单词居中...

看来你想把一个句子的三个部分分布在左、中、右。您可以将所有三个部分放入 DIV 或 SPAN 中(在这种特殊情况下这无关紧要，因为它们都通过其容器的 flex 定义成为 flex 元素)并为其父元素添加此规则:

.section-title {
  display: flex;
  justify-content: space-between;
}

完整代码如下:

.section-title {
  display: flex;
  justify-content: space-between;
}

<div id="section-movement" class="section-container">
  <div class="section-title">
    <span>Movement</span><span>*click entries for more details*</span><span>limited by movement speed</span>
  </div>
</div>