2

背景全体を通る線があるテキストを中央に配置しようとしています。テキストの両側に、行がまったく表示されないパディングがあります。私はこれについて行くための良いcssのみの方法まで困惑しています。これは明らかに間違っているjsfiddleですが、その始まりです：http: //jsfiddle.net/gtspk/

ここに画像の説明を入力してください

HTML

<span class="line">
    <h2>Latest Track</h2>
</span>

CSS

.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}

ここでの問題は、幅を指定したくないということです。これは、さまざまなヘッダー（さまざまな量のテキスト）でこれを再利用するためです。cssを介してこれを行うための最良の方法は何ですか？

更新：これを行う方法は次のとおりですが、インラインブロックのブラウザサポートはかなりお粗末です：http： //jsfiddle.net/gtspk/3/

4

1 に答える 1

10

どうぞ。折り返しスパンを追加する必要がありました（線がテキストに当たらないように背景を白に設定できるようにするために必要です）

http://jsfiddle.net/gtspk/9/

<span class="line">
    <h2><span>Latest Track</span></h2>
</span>​

.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}

そうです、申し訳ありませんが、パディングの意味を誤解しました。修正されました。</p>

于 2012-09-14T18:02:43.873 に答える