CSS

Question

我正在尝试设置标题文字的样式，类似于default legend text在字段集中的显示方式;也就是说，我想要一条类似删除线的行，而不是通过文本。我似乎无法找到有关如何实现这一目标的任何信息，因为在许多其他问题上，Google总是指示我使用Stack Overflow获取答案，我认为有人可以给我建议。

为了更清晰。我试图在标题文本上产生这种效果：

居中的标题文字

有没有办法做到这一点？

Answer 1

请参阅： http://jsfiddle.net/thirtydot/jm4VQ/

如果文本需要换行，这将不起作用。在IE7中，没有行。

<强> HTML：

<h2><span>Centered Header Text</span></h2>

<强> CSS：

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

Answer 2

我提出了一个快速，无图像的解决方案，似乎在IE 8+和其他浏览器中运行良好，同时在IE 6/7中优雅地降级：

<h1>CSS 2.1 EXAMPLE</h1>

h1 { position: relative; text-align: center; }
h1:first-line { background-color: white; }
h1:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0px;
    right: 0px;
    height: 1px;
    top: 50%;
    background-color: black;
}

但确实存在以下限制：

文字必须与整体背景颜色完全匹配，否则看起来会很奇怪。
如果您想在文本上添加任何填充，则需要在文本的任一侧使用不间断的空格（请参阅演示）。
标题文字必须始终在一行（如果固定宽度，则效果最佳）。

以下是演示：http://jsfiddle.net/AndyE/3tFQJ/

Answer 3

修改

<h2><strike>    </strike>Your Text Here<strike>    </strike></h2>

以下是使用一些简单标签和不间断空格的方法。

我会使用一张图片并将其称为一天，但这似乎对我有用：

CSS

fieldset { border-right: 0px; border-left: 0px; border-bottom: 0px; width: 200px; } legend { margin: 0 25%; }

HTML

<fieldset> <legend>My Text Here</legend> </fieldset>

这是我弄清楚如何用css做的唯一方法。请注意宽度是固定的。我再一次不会这样做。

Answer 4

以下是我在客户网站上使用的内容：http://jsfiddle.net/TPgE4/

优点：

无需图片 - 立即呈现
使用填充来控制文本两侧的空间
文字可以居中对齐，也可以左/右对齐 - 只需在margin-left: 8px样式定义中添加margin-right: 8px或h2 span以使其看起来不错

缺点：

需要在标题标记

<span>...</span>

文字必须适合一行以获得良好的外观
<span>元素上的背景颜色必须与周围的背景颜色相匹配，因此如果您有非纯色背景图片，渐变或图案，则它将无法完美匹配

Answer 5

有点迟到了，但这是我的解决方案：https://jsfiddle.net/g43pt908/

不需要图像，也不依赖于背景颜色。

<强> HTML

<div class="hr-text">
    <span>Some text</span>
</div>

<强> CSS

.hr-text {
    border-top: 1px solid #999;
    text-align: center;
    background-color: inherit;
}

.hr-text span {
    display: inline-block;
    position: relative;
    height: 14px;
    top: -12px;
    font-size: 14px;
    font-style: italic;
    color: #666;
    background-color: inherit;
    padding: 0 10px;
}

Answer 6

由于所有最新的浏览器都支持flexbox，而且作者提到IE8要求已经五年了，我想用它来构建一个新的解决方案。

各种各样的例子越来越复杂：

https://jsfiddle.net/0mL79b4h/1/

https://jsfiddle.net/0mL79b4h/2/

CSS

div {
  display: flex;
  align-items: center;
}

div:before,
div:after {
  border: 1px solid #000000;
  border-radius: 2px;
  height: 2px;

  display: block;

  content: "";
  flex: 1;

  width: 100%;
}

h1 {
  text-align: center;

  margin: 8px;
}

HTML

<div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

优点：

使用flexbox！
超级简单的HTML。
可以调整左右两侧的不对称性。
零背景问题，没有继承颜色等。
流体宽度。
多线支持。
左/中/右/自定义对齐：只需为前后元素分别调整flex属性，较高的数字将为该侧提供更多空间。完全取下一个向左或向右对齐。
通过玩边框样式有趣的效果（在这个例子中我实际上选择了一个圆形边框）。将高度设置为0px并使用border-top代替通用线。

缺点：

使用flexbox。叫我懒，但我没有在这个例子中构建任何向后兼容性所以它在支持psuedo元素但不支持flexbox的浏览器上看起来很奇怪，虽然最后我检查过那是Chrome（Firefox等），无论如何都会自动更新。可能想使用一些Modernizr。

Answer 7

我不确定这是否符合您的需要...

h1:before, h1:after {
 content: " ------------- ";
}

Answer 8

这不是一个非常好的答案，但无论如何我都会发布它。

请参阅： http://jsfiddle.net/rFmQg/

<h2><span>Centered Header Text</span></h2>

h2 {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    text-align: center
}
h2 span {
    background: #fff;
    padding: 0 9px
}

我不喜欢它，因为：

您必须使用图片。
This. （只有在背景匹配时才有效）

Answer 9

body { padding-top: 100px; }

div.parent {
    text-align: center;
    border-top: 1px solid #ccc;
}

div.parent div {
    display: inline-block;
    margin-top: -0.8em;
    padding: 0 0.5em;
    background: #fff;
}

<body>
    <div class="parent">
        <div>My Text Here</div>
    </div>
</body>

这是一个符合您设计的流体宽度解决方案，在IE7中应该没问题（虽然我承认我没有检查）。有几个缺点：

你丢失了fieldset / legend语义。
您无法在文字上添加透明背景。

如果你不需要它是流体宽度，onteria_的解决方案可能是你最好的选择。

如何在标题文本上创建字段集图例样式的“背景线”？

9 个答案:

CSS

HTML

CSS

HTML