表格单元格垂直对齐问题

我已经为我的一个表格单元格设置了浮点数。但是现在我不能改变它的内容的垂直对齐。默认情况下，它将内容移动到div的顶部。我试过valign: middle，vertical-align: middle没有成功。下面是结果：表格单元格垂直对齐问题

随着float: left

After changing float (float:left)

没有float: left

enter image description here

我怎么能垂直对齐单元格的内容与浮动？和标记看起来像

<td id="top_logo"> 
    <a href="index.php"> 
     <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/> 
    </a> 
</td> 
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

来源

2011-09-11 Tural Ali

我不知道这是否会帮助（我已经离开表基于布局落后了），但要解决使用直div是你可以做使用相同的一个类似的问题规则line-height。

<div id="tableRow"> 
    <div id="leftCell"><img src="mylogo" /></div> 
    <div id="middleCell">&nbsp;</div> 
    <div id="rightCell">User Name Here</div> 
</div>

你的CSS将创建设置宽度/高度等等，我猜你不会需要一个表，和为贵“rightCell”，你会设置行高度是一样的该行高度：

#rightCell 
{ 
    height: 30px; 
    line-height: 30px; 
}

那么，什么情况是文本的行间距，这是因为它是一样的高度垂直居中，给人的感觉是在元素的中心了。

现在就像我说的，我从来没有试过这种在桌子上电池，但是任何现代的浏览器应该让你更改显示属性使用说block或inline-block：

display: block;

任何改变块需要的其他类型。这会将单元格的显示类型设置为div（或跨度或其他元素），但我不知道它会对表格产生什么影响。

请注意，我没有解决旧版浏览器像IE6在这里，为了使这项工作全线开展，如果需要支持，您可能需要对旧版浏览器进行一些修补。

来源

2011-09-11 11:43:40 shawty

表格单元格垂直对齐问题

回答

相关问题