问题
I have a css class for centering a heading, and adding vertically centered lines on either side. Problem is, it uses css3 background properties, and not every browser supports those. So I'd like to simplify this for cross browser compatibility, but am not sure how to do that.
Is there a simpler way to achieve this, without the css3 background (and without adding any extra elements or static heights/widths)?
demo here
.section-heading {
display: table;
white-space: nowrap;
}
.section-heading:before {
background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
.section-heading:after {
background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
content: "";
display: table-cell;
width: 50%;
}
回答1:
There is my best try.
I have a little isue that I have corrected in Chrome; but I really don't know even why it works.
The CCS is
.test {
display: table-row;
white-space: nowrap;
line-height: 0px;
}
.test:before,
.test:after {
border-color: transparent;
border-top: solid black 1px;
border-left: solid transparent 1px;
border-bottom: solid rgba(0,0,0,0.01) 11px;
border-right: solid transparent 1px;
content: "";
display: table-cell;
width: 50%;
}
.test:before {
border-right: solid 30px transparent;
}
.test:after {
border-left: solid 30px transparent;
}
I am using the border to display the black line, and to have it positioned in place I have reduced the height of the table to 0.
fiddle
In the fiddle, I have kept your original demo, so that you can compare side by side.
And now, the weird part. change rgba(0,0,0,0.01) in the border bottom to rgba(0,0,0,0.001), and it will break (at least in Chrome).
I really would like to understand that ...
new answer
All the above was asuming that the requirement was to have a transparent style (that is , that it was posible to set a background that could be seen thru the h1. If this is not the case, there is another posible solution, using box-shadow instead of gradient barckground:
.test {
display: table-row;
white-space: nowrap;
}
.test:before,
.test:after {
border: solid white 10px;
content: "";
display: table-cell;
width: 50%;
height: 10px;
line-height: 10px;
box-shadow: inset 0px 5px white, inset 0px 6px black;
}
.test:before {
border-right-width: 10px;
border-left-width: 1px;
}
.test:after {
border-left-width: 10px;
border-right-width: 1px;
}
new demo
回答2:
You can use fieldset and legend, it's not very beautiful code but you don't need CSS3
http://jsfiddle.net/dASCv/9/
HTML
<fieldset>
<legend>
<h2>Example</h2>
</legend>
</fieldset>
CSS
fieldset {
text-align:center;
border:none;
border-top:1px solid black;
}
legend{
padding:20px;
}
OR this other method whit :after
and :before
HTML
<div>
<h2>text TEXT</h2>
</div>
CSS
div {
text-align: center;
}
h2:before,
h2:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.4em;
}
h2:after {
right: 0;
left: auto;
}
http://jsfiddle.net/dASCv/10/
回答3:
1-element solution
FIDDLE
Markup
<div>A header</div>
CSS
div
{
display: inline-block;
background: #fff;
padding: 0 10px;
}
div:before
{
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 20px;
border-bottom: 1px solid #c2c2c2;
margin-top: -9px;
z-index: -1;
}
(NB: for this solution to work, you need to set text-align:center on its parent element)
2-element solution (works over a background image)
FIDDLE
Markup
<div class="splitHR">
<span class="splitHRText">A header</span>
</div>
CSS
.splitHR{
text-align: center;
overflow: hidden;
}
.splitHRText
{
display: inline-block;
position: relative;
padding: 0 10px;
}
.splitHRText:before, .splitHRText:after
{
content: '';
display: block;
width: 1000px;
position: absolute;
top: 0.73em;
border-top: 1px solid #c2c2c2;
}
.splitHRText:before
{
right: 100%;
}
.splitHRText:after
{
left: 100%;
}
回答4:
Please add Prefix
for the CSS
For Webkit browswers
-webkit-gradient
Firefox
-moz-linear-gradient
IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
More Details Here http://webdesignerwall.com/tutorials/cross-browser-css-gradient
回答5:
Using this way also you can achieve the answer, please check this
<p style="display:block; width:100%; text-align:center;
border-bottom:1px #ccc solid; line-height:3px">
<span style="background-color:red; ">Examples</span></p>
http://jsfiddle.net/dASCv/11/
回答6:
css
h2 {
border-bottom: 1px solid black;
text-align: center;
margin: 0;
padding: 0;
}
h2 span {
display: inline-block;
position: relative;
padding: 0 20px;
bottom: -15px;
background-color: white;
}
markup
<h2><span>text Textsssssssssssssssss</span></h2>
You could set the bottom for span in percentage if you set the height for h2.
回答7:
you can use this code:
JsFiddle DEMO
HTML:
<h2><span>Title is here</span></h2>
CSS:
h2{
display:block;
text-align:center;
line-height:30px;
}
h2 span{
background:#fff;
padding:0 10px;
}
h2:after{
content:"";
display:block;
border-top:1px solid black;
margin-top:-15px;
}
Update:
you can use this code too: (single element)
JsFiddle
HTML:
<h2>Title is here</h2>
CSS:
h2{
display: table;
margin: 0 auto;
text-align: center;
line-height: 30px;
padding: 0 10px;
background: #FFF;
}
h2:after{
content:"";
display:block;
border-top:1px solid;
margin-top:-15px;
position:absolute;
width:100%;
left:0;
z-index:-1;
}
来源:https://stackoverflow.com/questions/19114146/how-do-i-simplify-this-header-with-lines-on-the-side-so-that-it-doesnt-need-cs