Html 标题为两侧的水平线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15557627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
heading with horizontal line on either side
提问by Tom Greever
I am working on some CSS where the design calls for page titles (headings) to be centered with horizontal lines that are vertically centered on either side. Further, there is a background image on the page so the background of the title needs to be transparent.
我正在研究一些 CSS，其中设计要求页面标题（标题）以水平线居中，水平线在两侧垂直居中。此外，页面上有一个背景图片，所以标题的背景需要是透明的。
I have centered the title and I can use pseudo class to create the line. But I need the line disappear when it cross the text of the title.
我已将标题居中，并且可以使用伪类来创建该行。但是当它穿过标题文本时，我需要该行消失。
I considered using a background gradient that goes transparent where the words are, but since each title could be a different length, I wouldn't know where to put the stops.
我考虑使用背景渐变，在文字所在的地方变得透明，但由于每个标题的长度可能不同，我不知道在哪里放置停止。
Here is the CSS so far:
这是到目前为止的 CSS：
h1 {
text-align: center;
position: relative;
font-size: 30px;
z-index: 1;
}
h1:after {
content: '';
background-color: red;
height: 1px;
display: block;
position: absolute;
top: 18px;
left: 0;
width: 100%;
}
Here is where I'm at: http://jsfiddle.net/XWVxk/1/
这是我所在的位置：http: //jsfiddle.net/XWVxk/1/
Can this be done with CSS without adding any extra HTML?
这可以用 CSS 完成而不添加任何额外的 HTML 吗？
回答by Romain Pellerin
Look at this http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition, here is your answer.
看看这个http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition，这是你的答案。
Here is your original code modified
这是您修改的原始代码
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>Note: the article is not online anymore, here is the last good archived version: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition
注意：文章不再在线，这里是最后一个好的存档版本：http://web.archive.org/web/20140213165403/http: //blog.goetter.fr/post/36084887039/tes-pas-cap -首映版
回答by electrophanteau
needed this a few days ago, but the accepted answer isn't working in IE.
几天前需要这个，但接受的答案在 IE 中不起作用。
this is what I came up with: works in every major browser (>= ie8)
这就是我想出的：适用于每个主要浏览器（> = ie8）
jsfiddle: http://jsfiddle.net/gKve7/
jsfiddle：http: //jsfiddle.net/gKve7/
HTML:
HTML：
<h2 class="decorated"><span>My Title</span></h2>
CSS:
CSS：
/* headlines with lines */
.decorated{
overflow: hidden;
text-align: center;
}
.decorated > span{
position: relative;
display: inline-block;
}
.decorated > span:before, .decorated > span:after{
content: '';
position: absolute;
top: 50%;
border-bottom: 2px solid;
width: 592px; /* half of limiter */
margin: 0 20px;
}
.decorated > span:before{
right: 100%;
}
.decorated > span:after{
left: 100%;
}
回答by electrophanteau
This might work:
这可能有效：
.floatClear {
clear: both;
}
#wrapper {
text-align: center;
position: relative;
}
#wrapper .line {
border-bottom: 2px solid red;
position: absolute;
width: 100%;
top: 15px;
}
#wrapper .textbox {
position: absolute;
width: 100%;
}
#wrapper .textbox .text {
background-color: white;
margin: 0px auto;
padding: 0px 10px;
text-align: center;
display: inline;
font-size: 24px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="line"></div>
<div class="textbox">
<div class="text">This is my Title</div>
</div>
</div>
</body>
</html>What happens here is you set the text over the line the background and with the background-color plus the side padding so it will hide the line behind the text block.
这里发生的事情是你将文本设置在背景线上，并使用背景颜色加上侧边距，这样它就会隐藏文本块后面的线。
