编辑：

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

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

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 +

<强> Live demo

原始答案：

没有任何图片：

<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;
}

<强> Live demo

您可以使用所需的任何块元素（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/

Answer 4

您可以这样做（对于背景，您可以制作1px颜色选择的图像）：

<h1><span>Some Text</span></h1>

h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }

编辑：没有bg颜色：

.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}

<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>

你需要调整百分比和诸如此类的东西，但它一般都适用。

中心文本，两侧都有类似hr的线条，不使用表格

4 个答案:

编辑：

原始答案：