Question

我正在尝试使用css在IE中创建一个小按钮，但标题不是垂直居中的...我该怎么做？

“vertical-align：middle;”没有效果：（

这是我的css ......

.tinyButton
{
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background: -moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5');
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-top-radius: 2px;
    border-bottom-top-radius: 2px;
    border: 1px solid #dcdcdc;
    color: #777777;
    font-family: verdana;
    font-size: 8px;
    padding: 1px 2px;
    height: 14px;
}

谢谢！魔

Answer 1

尝试设置较小的行高，例如：

line-height: 5px

如果它只适用于IE7，你可以这样做：

*line-height: 5px;

Answer 2

你已经尝试过了吗？

vertical-align: middle;

编辑：需要调整按钮的高度以使文本正确适合

Answer 3

用填充物调整
填充：3px 13px 5px;
删除了属性高度
添加了属性
浮动：左;

CSS

    .tinyButton {
        -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
        box-shadow: inset 0px 1px 0px 0px #ffffff;
        background: -webkit-gradient( linear, left top, left bottom, 
        color-stop(0.05,#ffffff),  color-stop(1, #d1d1d1) );
        background: -moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
        endColorstr='#e5e5e5');
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 2px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-top-radius: 2px;
        border-bottom-top-radius: 2px;
        border: 1px solid #dcdcdc;
        color: #777777;
        font-family: verdana;
        font-size: 8px;
        padding: 3px 13px 5px;
        float:left;
    }

在IE中按钮上的文本对齐

3 个答案: