当前位置:编程学习 > C#/ASP.NET >>

div中图文垂直居中显示

用datalist做了一个图文显示列表,就单纯的一个td里面放一张图片和图片名字,
在Firefox下能正常显示:

在IE6中看就没有垂直居中了:


datalist中td的代码如下:

<td class="mark dot1" width="100px" height="100px" align="center" valign="middle">
                                                            <a onclick='MenuChange3("<%#Eval("NameCh")%>");' style="cursor:pointer;vertical-align:middle;">
                                                                <img height="56" width="53" src='<%# "images/car2/"+Eval("Url") %>' />
                                                            </a>                          
                                                    <br>
                                                        <asp:Label ID="lblname" runat="server" Text='<%# Eval("NameCh") %>'></asp:Label>
</td>


之前也在td的style里面有设置过height和line-height属性,好像也没用,求救高手解答!!!! --------------------编程问答-------------------- 看你内容是什么了

一行文字的话用line-height最方便

图片的话用背景
background-image: url('images/03.gif');
background-repeat: no-repeat;
background-position: 50% 50%;   --------------------编程问答--------------------

<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <title>多行文字实现垂直居中 </title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <style type="text/css">  
            body {   
                font-size: 12px;   
                font-family: tahoma;   
            }   
               
            div#wrap {   
                display: table;   
                border: 1px solid #FF0099;   
                background-color: #FFCCFF;   
                width: 760px;   
                height: 400px;   
                *position: relative;   
                overflow: hidden;   
            }   
               
            div#subwrap {   
                vertical-align: middle;   
                display: table-cell;   
                *position: absolute;   
                *top: 50%;   
            }   
               
            div#content {   
                *position: relative;   
                *top: -50%;   
            }   
        </style>  
    </head>  
    <body>  
        <div id="wrap">  
            <div id="subwrap">  
                <div id="content">  
                    <pre>  
                     现在我们要使这段文字垂直居中显示!     
      div#wrap {    
      border:1px solid #FF0099;     
      background-color:#FFCCFF;    
      width:760px;     
      height:500px;    
      position:relative;     
      }    
      div#subwrap {     
      position:absolute;    
      border:1px solid #000;     
      top:50%;    
      }     
      div#content {    
      border:1px solid #000;     
      position:relative;    
      top:-50%;     
     }</pre>  
                </div>  
            </div>  
        </div>  
    </body>  
</html>  
--------------------编程问答-------------------- 不要auto,用margin-letf:*px.真实值,这样就不怕了。。。 --------------------编程问答-------------------- margin:0px auto 放在对应div里 --------------------编程问答-------------------- 找美工 --------------------编程问答-------------------- 错,是找前端设计师! --------------------编程问答-------------------- 找UI 设置.   就是CSS问题. --------------------编程问答-------------------- Td的高度 和图片一样, 这样就可以了,    如果TD高度大于图片, 那么图片就会往上去, 或者加个margin-top是多少, 也可以控制内容距离顶部多少  --------------------编程问答--------------------
引用 8 楼 wang2129929 的回复:
Td的高度 和图片一样, 这样就可以了,    如果TD高度大于图片, 那么图片就会往上去, 或者加个margin-top是多少, 也可以控制内容距离顶部多少


现在不是垂直方面的问题了,而是水平方向没有居中对齐了... --------------------编程问答-------------------- 哦,好像水平和垂直的都没有对齐... --------------------编程问答-------------------- 检查下里面有没有日企,有的话去掉,多半是这个问题
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,