我正在尝试将标题文本设置为类似于您的样式默认图例文本 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset出现在字段集中;也就是说,我想要一条类似删除线的行到达文本,但不贯穿文本。我似乎找不到任何关于如何实现这一目标的信息,而且由于谷歌总是引导我在许多其他问题上到 Stack Overflow 寻求答案,所以我想这里有人可能能给我建议。
为了更清楚。我试图在标题文本上获得这种效果:
居中标题文本
有什么办法可以做到这一点吗?
See: http://jsfiddle.net/thirtydot/jm4VQ/ 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)