html - テキストの上に分割するライン

Question

この効果をどのように行うことができます<hr>か？コンテンツを含む Div は終了します<hr>。どうやってするか？

これは私の jsfiddle です: http://jsfiddle.net/fnaYs/。このテキストを画像ボックスに入れる方法がわかりません。解決策はありますか？

あと、このレイアウトをワードプレスに追加したいので、テキストを<div>cssファイルではなく、または別の要素に入れたいです。

Answer 1

position変数の属性を に設定するrelativeと、基本的には要素の位置がブラウザに対して相対的であることを意味します。

つまりtop:-5px;、ブラウザに要素を実際の位置より5ピクセル上に配置するように要求していることを意味します..

CSS で div の top 属性を負の値に設定するだけです。このような：

<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>

を要件に置き換え-5pxてください...

Answer 2

私は解決策をコーディングしました（他の方法があるかもしれません）。

これが実際の JSFiddle です: http://jsfiddle.net/fnaYs/6/

CSS

hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

.box {
    background-color:teal;
    width:100px;
    height:30px;
    position:absolute;
    left: 40%;
    bottom:90%;
    padding-top:20px;

}

HTML

<hr class="line"/>
<div class="box"> Text </div>

Answer 3

必要なものを備えた動作中のjsFiddleは次のとおりです。 http://jsfiddle.net/2LaLb/

<hr class="line" /> <div class="mydiv">Div with text</div>

対応する CSS は次のようになります。

    hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

    .mydiv {
background:red;
    border:1px solid red;
    width:100px;
    position:absolute;
    top:0;left:400px;
}

ご覧のとおり、必要な結果が得られます。