html - 中央にテキストを含む横罫線を作成する

Question

ページに次のような仕切りを配置したいと考えています。

それを行う最善の方法は何ですか？

Answer 1

html

<h3><span>My latest work</span></h3>

CSS

h3 {
position:relative;
text-align:center;}

h3 span {
    display:inline-block;
    padding:0 10px;
    background:#fff;
}
h3:before {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:#ccc;
}

Answer 2

「最高」についてはわかりません-それを評価するための条件をあなたは与えていません。最小、最速、最も互換性など。

とにかく、私はあなたの画像の 1 ピクセル幅のスライスを取り、保存しました。次に、それを div の背景画像として使用します。

CSS:

#myDiv
{
    background: url(horizline1x41px.png) repeat;
    text-align: center;
    line-height: 41px;
}
#myDiv span
{
    padding-left: 16px;
    padding-right: 16px;
    background: white;
    font-weight: bold;
    font-size: 1.5em;
}

HTML:

<div id='myDiv'><span>OUR LATEST WORK</span></div>