居中div，将兄弟div扩展到剩余空间

Question

我试图将div居中并用div填充左右两边。

中心div将是可变长度的文本，而兄弟div将是填充可用空间的行。 这就是我设想的样子：

这是标记：

<div class='heading'>
  <div class='lines'></div>
  <div class='heading-link'>
    <a>Link Text</a>
  </div>
  <div class='lines'></div>
</div>
<div class='heading'>
  <div class='lines'></div>
  <div class='heading-link'>
    <a>Really Long Link Text that is still centered</a>
  </div>
  <div class='lines'></div>
</div>

这是准系统css：

.lines {
  display: inline-block;
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
}

.heading {
  text-align: center;
  display: inline-block;
}

.heading-link {
  display: inline-block;
}

关键点是.heading-link中的文字长度可变，我希望.lines div填充.heading-link左侧和右侧的剩余空格

我不想在.heading-link上设置百分比宽度，因为我不知道文字的宽度。我应该使用基于表格的布局吗？或者只是内联div？

Answer 1

使用CSS表的解决方案

以下内容可能与您的需求接近。

您的 HTML 原样：

<div class='heading'>
    <div class='lines'></div>
    <div class='heading-link'><a>Link Text</a></div>
    <div class='lines'></div>
</div>

<div class='heading'>
    <div class='lines'></div>
    <div class='heading-link'> <a>Really Long Link Text that 
        is still centered</a></div>
    <div class='lines'></div>
</div>

尝试以下 CSS ：

.heading {
    text-align: center;
    display: table;
    margin: 30px 0; /* for demo only */
}
.lines {
    display: table-cell;
    width: 48%; /* the exact value is not that critical... */
    border-top: 1px solid #2c2c2c;
    border-bottom: 1px solid #2c2c2c;
}
.heading-link {
    display: table-cell;
    white-space: nowrap; /* keeps the text from wrapping... */
    padding: 10px 20px; /* for demo only, as needed... */
}

如何运作

将display: table应用于父容器.heading，然后display: table-cell应用于子元素.lines和.heading-link。

我正在使用表格显示类型来利用表格单元格的自动调整大小功能。

我假设您的.heading-link文字适合一行，因此我强制使用white-space: nowrap将文字保留在一行中。这将强制.heading-link元素展开以包含文本。您可以根据需要使用填充来控制空白区域。

对于左右.lines元素，将with设置为48％。这将强制左右.lines元素计算到相同的宽度，是.heading-link消耗的空间后剩余的空间的一半。

如果需要，您还可以指定.heading的总宽度。

演示小提琴：http://jsfiddle.net/audetwebdesign/eyGdG/