Question

我有一个用于居中标题的css类，并在两侧添加垂直居中的行。问题是，它使用css3背景属性，而不是每个浏览器都支持这些属性。所以我想简化这个以实现跨浏览器兼容性，但我不知道该怎么做。

是否有更简单的方法来实现这一点，没有css3背景（没有添加任何额外的元素或静态高度/宽度）？

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

Answer 1

你可以使用fieldset和legend，它不是很漂亮的代码，但你不需要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;
}

或其他方法为:after和: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/

Answer 2

我有最好的尝试。

我有一点点我在Chrome中已经纠正过;但我真的不知道它为什么会起作用。

CCS

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

我正在使用边框来显示黑色线条，并将其放置到位我将表格的高度降低为0.

fiddle

在小提琴中，我保留了您的原始演示，以便您可以并排比较。

现在，奇怪的部分。将边框底部的rgba（0,0,0,0.01）更改为rgba（0,0,0,0.001），它将中断（至少在Chrome中）。

我真的很想明白...

新答案

以上所有都认为要求是透明风格（也就是说，设置一个可以通过h1看到的背景是可行的。如果不是这样的话，还有另一种可行的解决方案，使用box-shadow代替渐变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

Answer 3

1元素溶液

<强> FIDDLE

标记

<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：，要使此解决方案正常工作，您需要在其父元素上设置text-align：center）

2元素解决方案（适用于背景图像）

<强> FIDDLE

标记

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

Answer 4

请为CSS添加Prefix

对于Webkit浏览器 Firefox

 -webkit-gradient

IE

-moz-linear-gradient

更多细节http://webdesignerwall.com/tutorials/cross-browser-css-gradient

Answer 5

使用这种方式也可以获得答案，请查看

<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/

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

标记

<h2><span>text Textsssssssssssssssss</span></h2>

如果设置h2的高度，则可以设置跨度的底部百分比。

Answer 7

您可以使用此代码：

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

<强>更新

您也可以使用此代码：（单个元素）

JsFiddle