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值。

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

1 个答案: