css - 两个跨度在一个 div 中彼此相邻，将其中一个居中

Question

我想在一个 div 中将两个 span 并排放置，并将其中的 一个 居中。但是，如果我对外部 div 进行文本对齐:居中，那么(当然)它将居中的两个跨度的组合。以下类的正确 CSS 代码是什么？谢谢!

<div class="div_with_spans">
<span class="span_centered">Centered text</span><span class="span_next">More teext</span>
</div>

Answer 1

为什么不直接将居中的 span 设为 block 元素并将其中的文本居中:

.span_centered {display:block; text-align:center;}

<div class="div_with_spans">
  <span class="span_centered">Centered text</span>
  <span class="span_next">More teext</span>
</div>

更新

要使文本居中但居中文本右侧有更多文本，您需要更改 html 的结构并从页面流中取出更多文本

.div_with_spans {
  display: block;
  text-align: center;
}

.span_centered {
  position: relative;
}

.span_next {
  margin-left:0.75em;
  position: absolute;
  left: 100%;
  white-space: nowrap;
}

<div class="div_with_spans">
  <span class="span_centered">
    Centered text
    <span class="span_next">More teext</span>
  </span>
</div>