3

我有一个用于使标题居中的 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%;
}
4

7 回答 7

6

你可以使用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/

于 2013-10-01T10:48:05.237 回答
3

这是我最好的尝试。

我在 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。

小提琴

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

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

我真的很想明白这...

新答案

以上所有假设要求具有透明样式（即，可以设置可以通过 h1 看到的背景。如果不是这种情况，还有另一种可能的解决方案，使用 box-阴影而不是渐变背景：

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

新演示

于 2013-10-12T19:56:29.977 回答
1

一元溶液

小提琴

标记

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

}

（注意：要使此解决方案起作用，您需要在其父元素上设置 text-align:center ）

2 元素解决方案（在背景图像上工作）

小提琴

标记

<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%;
}
于 2013-10-10T11:10:40.850 回答
0

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 设置高度，则可以按百分比设置跨度的底部。

于 2013-10-10T11:17:21.963 回答
0

使用这种方式你也可以得到答案，请检查这个

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

于 2013-10-10T11:02:02.120 回答
0

您可以使用以下代码：

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

更新：

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

提琴手

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;
}
于 2013-10-10T14:06:32.183 回答
0

请添加PrefixCSS

对于 Webkit 浏览器

 -webkit-gradient

火狐

-moz-linear-gradient

IE

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

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

于 2013-10-10T10:53:17.813 回答