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

时间:2013-07-04 13:20:52

标签: html css

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

答案 0 :(得分:3)

line-height缩减为23px

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

答案 1 :(得分:0)

我认为您不需要font-sizeline-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/

答案 2 :(得分:0)

这只是因为你的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;
}

答案 3 :(得分:0)

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