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

フィールドセットと凡例を使用できます。あまり美しいコードではありませんが、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-グラデーション 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;
}

新しいデモ

于 2013-10-12T19:56:29.977 に答える
1

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

この方法でも答えを得ることができます。これを確認してください

<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

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 に答える
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 に答える