Question

我想在div中将两个跨距彼此相邻，并将中间一个对齐。但是，如果我文本对齐：中心外部div然后（当然）它是将居中的两个跨度的组合。以下类的适当CSS代码是什么？谢谢！

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

Answer 1

为什么不将中心跨度设为块元素并将文本置于其中：

＆＃13;

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

＆＃13;

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

＆＃13;

更新

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在div中彼此相邻的两个跨度，其中一个居中

1 个答案: