流体の幅でテキストのまわりでラインスルーを取得

Question

私はしばらくの間問題に立ち往生しました。 私はh1要素が必要です。このように： -----テキスト-----

ページの背景はイメージなので、h1要素の背景色を使ってテキストを隠すことはできません。

3列のテーブルで結果を得ることができましたが、センターセルの幅を設定する必要があります。

動的な幅で動作させることは可能でしょうか？

ありがとうございます。

Answer 1

はJavaScriptでそれをやった、私はそれを避けることができたとき、私は通常、それを使って好きではないが、私は別の方法を見つけ出すことができませんでしたし、私のコードがきれいです。 jQueryで検出されたクラスで通常のhnを使用しました。 Then： - タイトルが表示されます：インラインブロック、この方法では、ブロックの内容が幅広く、後で幅を使用できません。 - タイトルが整列してブロックするように戻されます：中央 - タイトルは新しいdiv要素 によってラップされている - 私は私が持っていたwhidthそれは

Answer 2

私は、テキストの両側に行を追加するために、CSS疑似要素beforeと：afterを使用します。

このような何かがうまくいくかもしれない

いますが、周りを再生する必要があります：あなたが仕事のようなものでしょう隠さに設定オーバーフロー、およびテキストアライン中心とした容器の中にあることを利用した場合

.textWithLine:before { 
    display:block; 
    content: ""; 
    float:left; 
    width: 300px; 
    height: 1px; 
    background: #000; 
    margin:5px; 
} 
.textWithLine:after { 
    display:block; 
    content: ""; 
    float:right; 
    width: 300px; 
    height: 1px; 
    background: #000; 
    margin: 5px; 
}​ 

をダイナミックではありますが、完璧なものにするためにはプレイが必要です。

Answer 3

ご回答ありがとうございます。 良いアイデアのように思えますが、2つの追加されたブロックを親ブロックから超過する方法を見つけることができません。 結果はタイトルの下にプッシュされる：afterブロックです。ここで

は私のコードです：最後に

<div class="titre_bloc2"> 

    <h1>Title</h1> 

</div> 


.titre_bloc2 
{ 
position:absolute; 
height:30px; 
text-align:center; 
width:100%; 
overflow:hidden; 
} 
.titre_bloc2 h1 
{ 
border:1px solid white; 
text-align:center; 
display:inline-block; 
} 
.titre_bloc2 h1:before 
{ 
width:300px; 
height:20px; 
border:1px solid blue; 
float:left; 
display:block; 
content: "test"; 
} 
.titre_bloc2 h1:after 
{ 
width:300px; 
height:20px; 
border:1px solid blue; 
float:right; 
display:block; 
content: "test"; 
} 

Answer 4

を使用すべきかを計算した後、タイトルの周囲に配置されている2つの新しいdiv要素を作成します同じ質問ですが、私が見つけた答えのほとんどは、私が見つけたときまで、必要なものに合わなかったのです。CSS technique for a horizontal line with words in the middle。

このソリューションはJSを使用せず、ほぼすべての状況で動作します。それが役に立てば幸い。

*****編集***** 私のプロジェクトに使用したコードは次のとおりです。興味がある場合は、jtslegal.comで最終結果を確認することができます。すべてのサイドバーウィジェットのタイトルに使用しました。

<div id="widget_title">Request a Call</div> 

#widget_title { overflow: hidden; padding: 10px 26px 0; } 
#widget_title:after, #widget_title:before { 
    content: ''; 
    display: inline-block; 
    height: 1px; 
    width: 100%; 
    margin: 0; 
    background: #999; 
    text-indent: 20px; 
    position: relative; 
    vertical-align: middle; 
} 
#widget_title:after { 
    left: .5em; 
    margin-right: -100%; 
} 
#widget_title:before { 
    right: .5em; 
    margin-left: -100%; 
}