html - 居中文本，两边有类似 hr 的线，不使用表格

Question

我需要创建一个标题，标题文本两侧的线条长度相等，线条和文本之间的填充大小固定。文本会有所不同，因此不能设置宽度。线条应占据标题容器中所有可用的剩余宽度。标题文本不得设置背景，因为其背后的背景会有所不同。像这样:

-------------------------------------------- ---------- 一些文字 -------------------------------------- ------------------

我用表格解决了这个问题:

<table width="100%">
  <td><hr /></td>
  <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
  <td><hr /></td>
</table>​

您可以在这里试用:http://jsfiddle.net/md2dF/3/

从语义上讲，这是一个非常糟糕的解决方案，标题与表格数据无关。如果没有 table ，你会怎么做？

总结一下(因为建议的解决方案都忽略了一个或多个要求):

• 标题不能有固定宽度
• 标题文本不得有背景
• 标题文本不能有固定宽度
• 文本两边的线条必须占据所有剩余宽度
• 行与文本之间的内边距必须有固定的宽度
• 如有疑问，请查看 http://jsfiddle.net/md2dF/3/

Answer 1

Newer answer that works on newer versions of IE and Firefox

没有任何技巧:

fieldset.title {
    border-top: 1px solid #aaa;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: block;
    text-align: center;
}

fieldset.title legend {
    padding: 5px 10px;
}

<fieldset class="title">
    <legend>Some text</legend>
</fieldset>

Live demo on jsfiddle