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

-2

我有一个由<ul>组成的菜单。每个<li>都有一个<a>，并且每个<a>都有一个图像和一个标签。将图像悬停（javascript）更改为更大的图像，因此图像的大小无济于事。我想在菜单项的中间垂直对齐图像。在这里你有代码：如何在div中垂直对齐未知大小的图像

<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，能不能找到一种方法

来源

2011-11-30 bokkie

一个建议，如果方便的话，你可以把你的图片做成背景图片，很容易用图片位置把图片中心控制成一个'div'。 – Giberno

这不是一个asp问题，而是一个HTML/CSS问题。你会粘贴一些在浏览器中生成的代码吗？最好是你在jsfiddle中创建一个例子 – HerrSerker

@HerrSerker - 我认为只要还有asp控件参与，我也会把asp写成一个标签...知道asp的人可能也知道这些类型的东西...我没有写WPF，因为它与WPF无关，但是使用asp它有一些事情要做（因此 bokkie

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

编辑2
另一项建议是
不要把它们作为内部元素<img />但background-image与background-position: 10px 50%什么

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

原稿
不要你se float: left浮动不可垂直对齐。使用display:inline-block而不是line-height值。

来源

2011-12-01 12:42:14 HerrSerker

:(（它doesn' t work ...我完全剔除了标签，只留下了中的图像div，并按照您的说法更改了css，然后将其浮动，然后使用显示和行高以及图像上没有任何更改：（ – bokkie

那么，只要有他们在任何服务器上，并在代码中给他们的URL与'src =“http：// ...”' – HerrSerker

好的，我做到了，这是链接：http：// jsfiddle。net/td4jy/1 /;在html部分有一个注释，我给出了“应该是”的打印屏幕和应该悬停的图片，因为我没有更改原始代码就做这些。谢谢 – bokkie

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

回答

相关问题