☰

中央に単語を配置した水平線を作成するための CSS テクニック 質問する

tag-icon • tag-icon html css cross-browser
中央に単語を配置した水平線を作成するための CSS テクニック 質問する

中央にテキストがある水平線を作成しようとしています。例:

----------------------------------- ここに私のタイトルを記入 -----------------------------

CSS でそれを実行する方法はありますか? もちろん、「-」ダッシュは使用しません。

ベストアンサー1

大まかに言うと、次のように行います。border-bottomを含む に を設定し、 に小さい をh2与えることで線を作成します。 次に、テキストを不透明な背景を持つネストされた に配置します。h2line-heightspan

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

Chrome でのみテストしましたが、他のブラウザでも動作しない理由はありません。

JSFiddle:http://jsfiddle.net/7jGHS/

おすすめ記事