Question

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

将line-height缩减为23px

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

Answer 2

我认为您不需要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 3

这只是因为你的line-height。删除它，它的工作原理:)）

Fiddle.

<强> 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 4

如果您更改为line-height: 20px;，那么它将居中。

简单的CSS问题，设置按钮大小的样式

4 个答案: