我如何做一个字段集的图例风格的“背景线”标题文本？ [英] How can I make a fieldset legend-style "background line" on heading text?

问题描述

我尝试设置标题文字的样式，类似于默认图例文字显示在场地也就是说，我想要一条类似于删除线的线来到文本，但不是通过文本。我似乎找不到任何有关如何完成这一点的信息，并且由于许多其他问题，Google总是指示我Stack Overflow的答案，我认为在这里的人可能能够给我建议。

I'm attempting to style heading text similar to how your default legend text appears in fieldsets; that is to say, I'd like a strikethrough-like line to come up to, but not through, the text. I can't seem to find any information on how I might accomplish this, and since on numerous other questions Google's always directed me to Stack Overflow for answers, I thought someone here may be able to give me advice.

为了更清楚起见。我试图在标题文本上获得此效果：

For greater clarity. I'm attempting to get this effect on header text:

                                                        

                               Centered Header Text                               

有什么办法吗？

推荐答案

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

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

If the text needs to wrap, this won't work. In IE7, there will be no line.

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

这篇关于我如何做一个字段集的图例风格的“背景线”标题文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！