ポジショニング<label></label>

Question

親愛なるコミュニティメンバー内のテキスト、私はdiv要素の中心にテスト内のテキストを配置したい

。コードは次のようになります。

<div id="main" style="width: 960px;"> 
<form> 
<label for="test">Testing everything:</label> 
</form> 

私は、コードの次のセクションしようとすると今：

<label for="test" style="width: 100%; text-align:center;">Testing everything:</label> 

をそれは私の主層内のテキストを中央にしません。

<div style="width:100%; text-align:center;"><label for="test">Testing everything:</label></div> 

これを達成するための標準的な方法は何ですか。

ありがとうございました！

Answer 1

問題は非常に簡単です：labelはブロックレベルのタグではないため、ラベル要素に幅を与えることはできません。言い換えれば、ラベル要素の幅はその内容の幅です。

あなたのケースでは、それはあなたの "テスト" divの幅全体を満たしておらず、次にセンタリングできないことを意味します。

この問題を解決するには、ちょうどあなたのラベルに以下のCSSプロパティを追加します。

表示：インラインブロック;

この方法では、ラベルはすべての幅（および高さ）に関連するブロックとして認識され、100％の幅が正しく適用され、きれいに中央揃えのテキストになります。