如何在div中垂直对齐未知大小的图像

Question

我有一个由<ul> 组成的菜单。每个<li> 内部都有一个<a>，每个<a> 都有一个图像和一个标签。 图像在悬停（javascript）上变为更大的图像，因此图像的大小没有帮助。我想在菜单项的中间垂直对齐图像。这里有代码：

<script type="text/javascript">        
<!--
function changeImage(element, toReplace, withReplace) {
    var str = document.getElementById(element).src;
    document.getElementById(element).src = str.replace(toReplace, withReplace)
}
// -->

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="UserControls_Menu" %>
<ul id="navmenu">
<li><a id="default" runat="server" href="~/Default.aspx" onmouseover="changeImage('sideBar_Menu1_Image7', 'Calendar24x24.png', 'Calendar32x32.png');"
    onmouseout="changeImage('sideBar_Menu1_Image7', 'Calendar32x32.png', 'Calendar24x24.png');">
    <div class="divImage">
        <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
    </div>
    <div class="divLabel">
        <asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
    </div>
</a></li>


.divImage
{
    width: 29px;
    height: 29px;
    float: left;
    text-align: center;
    vertical-align: middle;
}

.divLabel
{
    float: left; 
    padding-top: 3px;
}

无论我做什么，垂直对齐都不起作用...我使事情起作用的唯一方法是使用表格，但是点击仅适用于图像，它也不适用于标签.. .我也试过不使用div，找不到方法

Answer 1

编辑 3
http://jsfiddle.net/HerrSerker/td4jy/2/

---

编辑 2
另一个建议是
不要将它们作为<img /> 元素放在里面，而是作为background-image 和background-position: 10px 50% 或其他东西放在里面

---

编辑 1
http://jsfiddle.net/HerrSerker/sftGT/1

---

原版
不要使用 float: left 浮动不能垂直对齐。将display:inline-block 与line-height 值一起使用。