CSS のヒント: 水平線と中央揃えのテキストを作成する

Question

テキストを含む水平方向の区切り線を作成しようとしています。 例:

---------------------- これが私のタイトルです------ -- ----------

CSS でこの効果を実現する方法はありますか?明らかに、すべての「-」ダッシュを使用する必要はありません。

Answer 1

さまざまなソリューションを試した結果、さまざまなテキスト幅、あらゆる背景に対応し、追加のマークアップを追加せずに機能するソリューションを見つけました。

リーリー リーリー

IE8、IE9、Firefox、Chrome でテストしました。ここで確認できます: http://jsfiddle.net/Puigcerber/vLwDf/1/

Answer 2

これは大まかに私が行う方法です。 h2 を含む border-bottom を設定し、次に h2 に小さな line を与えます。 -height を使用して線を作成します。次に、背景が不透明なネストされた span 内にテキストを配置します。

リーリー リーリー