html - CSSでhtml見出しの真ん中に水平線を引く方法は?

Question

画像を使用してそれを行うようになりましたが、CSS を介して行いたいと思います (絶対位置または相対位置ではなく、レスポンシブにしようとしています)。

例: http://teothemes.com/wp/services/ . 見出しは「サービス」で、3 つのコンテンツ領域のすぐ上にあります...CSS だけで同じ効果を実現したいと思います。いくつか試してみましたが、うまくいきませんでした。

ありがとうございました。

Answer 1

これが私がそれを行う方法です-> http://tinkerbin.com/QN9efWHd

• CSS3 背景画像
• 背景画像を覆う背景でスパンします。

HTML...

<p>
    <span>Services or Something</span>
</p>

... CSS の場合 ...

p {
    background: linear-gradient (to bottom,  rgba(145,37,37,0) 49%,
                rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%,
                rgba(145,37,37,0) 54%);
    text-align: center;
}

span {
    display: inline-block;
    padding: 0 10px;
    background: #fff;
}

Answer 2

ボーダー付きの 1 つのフローティング スパンを使用する:

<div class="heading">
     <span></span>
     <h3>Heading<h3>
</div>


.heading {
    width: 100%;
    text-align: center;
    line-height: 100%;    
}

.heading span {
    float: left;
    margin: 20px 0 -8px;
    border: 1px solid;
    width: 100%;
}

.heading h3 {
    display: inline;
    padding: 0px 0px 0 20px;  
    width: auto;
    margin: auto;
}

スパンの負のベース マージンは、さまざまな見出しサイズに合わせて調整する必要がある場合があります。、見出しの背景色は、コンテナ全体の背景と一致する必要があります。

JS フィドルのデモ

Answer 3

これが私のやり方です... 唯一のことは、spans幅が設定されていることです。

HTML

​<div id="hr">
    <span></span>
    asdf
    <span></span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#hr span {
    width:200px;
    border-bottom:1px solid #ccc;
    display: inline-block;
    margin-bottom:5px;
}

デモ

Answer 4

私はこの問題に対する解決策をたくさん探していましたが、本当にシンプルなものが欲しかったのです。:beforeandを使用:afterして、水平線/線を入れたい見出しにコンテンツを埋め込んでみませんか。以下の CSSでは、見出しの水平線にEM DASH ( unicode ) を選択しました。\2014より大きな水平線を作成する場合、フォントによっては、複数の EM DASH から文字間隔を取り除く必要があります。最後に、見出しテキストを圧迫しないように、 EM DASHの頭と尾にパディングを追加できます。

ここにいくつかの CSS があります。heading-1 は非常に単純で、heading-2 には長い行があります (実際のhttps://jsfiddle.net/pyxkh3jz/を参照してください)。

h1:before, h1:after {
    content:"\2014";
}
h2:before, h2:after {
    /* two dashes */
    content:"\2014\2014";
    /* depending on your font adjust this */
    letter-spacing: -6px;
}
/* add some padding so heading text isn't touching lines */
h2:before {
    padding-right: 15px;
}
h2:after {
    padding-left: 15px;
}

ここではブラウザの互換性を確認していません。しかし、これは根本的な CSS ではないので、一部またはほとんどの人にとってはうまくいくはずです。線とその長さは私のユースケースに合っています。

このアイデアは、おそらく他の熱心な人によって改善される可能性があります...試してみてください!