2

我有一个按钮，里面只有一个字母。这是它的 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;

}
4

4 回答 4

3

减少line-height到23px

http://jsfiddle.net/GfETQ/1/

于 2013-07-04T13:24:34.607 回答
0

只是因为你的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;
}
于 2013-07-04T13:26:32.803 回答
0

如果您更改为line-height: 20px;然后它将居中。

于 2013-07-04T13:26:39.500 回答
0

我不认为你需要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/

于 2013-07-04T13:26:08.210 回答