html - シンプルな CSS の問題、ボタンのサイズのスタイリング

Question

1文字しかないボタンがあります。これはその HTML です。

<button type="button" class="clicker">X</button>

そのボタンのサイズを変更して、必要なだけ小さくし、その文字をボタンのサイズに合わせておく必要があります。

次のCSSを試してみましたが、ボタンのサイズが変更されましたが、テキストが続きません。ボタンの下部にあるか、まったく表示されていません。

.clicker {
float: right;
font-family:"Calibri",Arial,Sans Serif;
font-size:1.0em;
line-height: 30px;
color:red;
text-align: center;
wordwrap: center;
text-shadow:1px 1px 1px #FFFFFF;

width:  30.0px;
height: 25.0px;

}

Answer 1

font-sizeプロパティは必要ないと思いますline-height。vertical-align代わりに使用してください。

.clicker {
    font-family: "Calibri", Arial, Sans Serif;
    font-size: 1.0em;
    color:red;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 30px;
    height: 25px;
    vertical-align: middle;
}

フィドル:- http://jsfiddle.net/7wCLu/

Answer 2

それはあなたのせいですline-height。それを削除すると動作します:)

フィドル。

CSS:

.clicker {
    float: right;
    font-family:"Calibri", Arial, Sans Serif;
    font-size:1.0em;
    color:red;
    text-align: center;
    wordwrap: center;
    text-shadow:1px 1px 1px #FFFFFF;
    width: 30.0px;
    height: 25.0px;
}

Answer 3

に変更するline-height: 20px;と、中央になります。