Center the text of an inline-block

Question

I need to center the text in one of my inline-block button. How might I go about accomplishing this? Any help will be appreciated.

Source Code:

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>

Without vertical-align : middle :

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

With:

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

Answer 1

I've just find the solution by adding a label and changing his css:

Button

<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属性设置高度，并且文本将自动垂直居中。