将内联块的文本居中

Question

我需要将文本置于行内阻止按钮之一的中央。 我应该如何去实现呢？ 任何帮助将不胜感激。

源代码：

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;
}

Answer 2

如果您确定每个选项都适合一行，则可以使用line-height属性设置高度，并且文本将自动垂直居中。