html - 将元素包裹在一个固定居中的元素周围

Question

我创建了一个没有固定的 DIV - 只是让它占据其父级的 100%。现在我想使用破折号作为居中元素。破折号应始终恰好出现在 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 不是强制性的，它只是将示例文本居中。

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

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