これは古い質問ですが、divタグの境界線にテキストを配置する最適な方法は何ですか？これは私が、私はdivタグのボーダーにタイトルを追加したいdivタグの境界にあるテキスト
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}<div class='componentWrapper'>Text inside div </div>を持っているものです。私はフィールドセットを使用するオプションがあることを知っていますが、私はこのアプローチに踏み込んでいません。もう1つのアプローチは、ボックスを入れて移動して背景色を設定することですが、ページに異なる背景色を設定すると失敗します。
これに最適な解決策は何ですか？
私はposition:absoluteを使用して、そのようなことを示唆している：私は、内側 `span`と擬似要素... 20分後に開始
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 15px 10px 10px;
width: 95%;
}
.componentWrapper .header {
position:absolute;
margin-top:-25px;
margin-left:10px;
color:white;
background:cadetblue;
border-radius:10px;
padding:2px 10px;
}<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>
。私はこれが非常に効果的なピクセルマッチングを行い、2つの（合理的な）オプション、 'fieldset'を持っているか、border/textにSVGを使うようになりました。クロスブラウザーサポートのために' fieldset'を私は見ることができません**いくつかの理由は、誰もしたい/好む理由は十分ではない、単純に彼らが使用されることを意味している要素を使用するか、無効なコードで終わるでしょうどこに – LGSon
これはフォームではないので、フィールドセットの使用を避けたいのです。 –
有効ななしで：http://stackoverflow.com/questions/9812898/is-it-wrong-to-use-the-fieldset-tag-without-form-tag – LGSon