中心文本,两侧都有类似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/

从语义上讲,这是一个非常糟糕的解决方案,标题与表格数据无关.没有桌子你会怎么做？

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

• 标题不得有固定的宽度
• 标题文字不得有背景
• 标题文字不得有固定的宽度
• 文本两侧的线条必须占用所有剩余宽度
• 线条和文本之间的填充必须具有固定的宽度
• 如有疑问,请查看http://jsfiddle.net/md2dF/3/

Answer 1

更新的答案适用于较新版本的IE和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>

现场演示jsfiddle

Answer 2

编辑:

没有任何背景颜色或图像:

<div>
    <div><hr></div>
    <span>Some text</span>
    <div><hr></div>
</div>?

CSS:

div {
    width:300px;
    text-align:center;
    display:table;
}
div > div {
    display:table-cell;
    vertical-align:middle;
}
div > span {
    white-space:nowrap;
}?

适用于IE8 +

现场演示

原始答案:

没有任何图像:

<div>
<span>Some text</span>
</div>??????????????????????????????????

CSS:

?div {
    border-bottom:1px solid #000;
    line-height:16px;
    text-align:center;
}
span {
    background:#FFF;
    position:relative;
    bottom:-8px; /* half of line-height */
    padding:0 15px;
}

现场演示

你可以使用任何块,你想(元素h1,h2,whatever而不是)div.

Answer 3

在不知道宽度和背景颜色的情况下解决此问题的方法如下:

结构体

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
}

.strike > span:after {
    left: 100%;
}

示例:http://jsfiddle.net/z8Hnz/