html - border-radiusを使用すると、テキストの整列が中央に配置されず、中央に配置されません

Question

番号を揃える必要があります。1から赤い円の中心までですが、機能していません

#box {
    background: red;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;

    height: 50px;
    text-align: center;
    width: 50px;
}

http://jsfiddle.net/kFaXp/8/

このボックスの中央に1を配置するにはどうすればよいですか。</p>

Answer 1

テキスト-中央を水平方向にのみ中央揃えにします。あなたはこれを試すことができます

#box {
    background: red;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;

    height: 50px;
    text-align: center;
    width: 50px;
    vertical-align:middle;
    display:table-cell

}​

http://jsfiddle.net/kFaXp/14/

Answer 2

line-height: 50px;要素のCSSに追加します。

#box {
    background: red;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF; 
    height: 50px;
    text-align: center;
    width: 50px;
    line-height: 50px;
}​

http://jsfiddle.net/Kyle_Sevenoaks/kFaXp/9/

Answer 3

定義することにより、希望する結果を達成できますline-height: 50px;

http://tinkerbin.com/I2slDWGY

Answer 4

line-heightおよびvertical-alignプロパティを追加する

#box {
 background: red;
 border-radius: 50% 50% 50% 50%;
 color: #FFFFFF;

 height: 50px;
 text-align: center;
 width: 50px;
 line-height: 50px;
 vertical-align:middle;
} ​

http://jsfiddle.net/kFaXp/13/