html - 将行内 block 的文本居中

Question

我需要将文本置于我的一个内联 block 按钮中。我该怎么做才能做到这一点？任何帮助将不胜感激。

源代码:

CSS:

.dropMenu
{
    color: #FFFFF0;
    text-decoration: none;
    display: inline-block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 80%;
    text-align: center;
}

.dropMenu:hover,
.dropMenu.selected
{
    background-color: #544E4F;
}

HTML:

<a href="#" class='dropMenu'><input type="image" src="images/down.png" name="dropDown" width="23" height="23">dropMenu</a>

没有 vertical-align : middle:

http://img140.imageshack.us/img140/7476/withoutt.png

与:

http://img834.imageshack.us/img834/904/withe.png

Answer 1

我刚刚通过添加标签和更改他的 css 找到了解决方案:

按钮

<a href="#no-reload" id='dM1' class='dropMenuButton'><input type="image" src="images/down.png" name="dropDown" width="18" height="18"><label for="dropDown">Menu</label></a>

CSS

label
{
    padding: 0 5px 0 5px;   
    vertical-align:super ;
}

.dropMenuButton
{
    color: white;
    text-decoration: none;
    display: inline-block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 80%;
    padding: 5px 5px 5px 5px;
}