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

Posted 2023-03-05

【中文标题】居中的文本，两边都有类似 hr 的线条，不使用表格

【英文标题】：Centered text with hr-like line on both sides, without using a table

【发布时间】：2012-09-13 09:35:28

【问题描述】：

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

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

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

<table >
  <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/

【参考方案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

【讨论】：

添加了fieldsetpadding: 0，效果很好。非常干净的解决方案；在所有其他 SO 中最干净的：***.com/questions/2812770/…***.com/questions/5214127/…***.com/questions/10430557/… 这个方法最好的部分是不需要声明background/-color。也不需要绝对定位，并充分利用已经具有请求功能的干净fieldset 元素。不错！

与使用背景颜色隐藏线条（不适用于图像）相比，这确实是一个很好的解决方案。谢谢！

-1 我在 Mac OS X 10.10.2 上使用 Safari 8.0.3（有效）、Chrome 40.0.2214.115（有效）和 Firefox 36.0（无效）进行了尝试。我还在 Windows 8.1 上使用 Internet Explorer 11（不起作用）、Chrome 40.0.2214.115（起作用）和 Firefox 36.0（不起作用）进行了尝试。在我看来，在 Firefox 或 Internet Explorer 11 中不起作用的解决方案并不是一个很好的解决方案。

这在 IE 或 Mac OSX 的 Safari 上不起作用，因为上面的人说这不是最好的解决方案

有没有办法让一些边距正确而不从中心修改文本......？

【参考方案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

你可以使用任何你想要的block元素（h1、h2、whatever）来代替div。

【讨论】：

正如我在问题中所说，文本不能有背景颜色。

新答案也不正确。线条必须占据所有剩余宽度。你的没有。

您可以根据需要调整跨度和小时大小。如果字符数变化很大，您的方法似乎是“最好的”。

文本和容器都必须能够变化。我不想手动调整任何宽度。

?!不，没有，检查一下：jsfiddle.net/gionaf/5pMDK/14 将 background:yellow; 更改为您想要的任何颜色

【参考方案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/

【讨论】：

很好的解决方案。如果您使用border: 1px solid red 或border-top: 1px solid red 而不是background: red，则该行也将显示在打印输出中。

【参考方案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; 

编辑：没有背景颜色：

.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>

您需要调整百分比之类的，但它一般都有效。

【讨论】：

正如我在问题中所说，文本不能有背景颜色。

为您添加了第二个解决方案，试试看？ :)