Question

我创建了一个没有固定的DIV - 让它占用100％的父级。现在我想使用短划线作为居中元素。 Dash应该总是恰好出现在div的中间。那个破折号周围应该没有固定大小的元素。有没有办法做到这一点？

HTML

<div>
  <span>Element #1</span>
  <span class="centered">-</span>
  <span>Element #2</span>
</div>

我尝试将居中的元素设置为绝对值，它始终保持在DIV的中间（带有文本对齐中心），但是我不能让它周围的物品。元素＃1可以包含20个符号，为什么元素＃2只能是3个字符大。

除了尝试使用经典表格或使用JS修复它之外，任何想法都是适用的。

Answer 1

如果我误解了你的问题，请原谅，但CSS表怎么样？在下面的示例中使用text-align并非强制性的，它只是示例文本的中心。

＆＃13;

.t {
  background: thistle;
  display: table;
  width: 100%;
  text-align: center;
}
.t > .centered {
  width: 1px; /*Will resize*/
}
.t > span {
  display: table-cell;
  width: 50%;
}

＆＃13;

<div class="t">
  <span>Element with longer content #1</span>
  <span class="centered">-</span>
  <span>Element #2</span>
</div>

＆＃13;

围绕固定的居中元素包裹元素

1 个答案: