表格單元格垂直對齊問題

我已經爲我的一個表格單元格設置了浮點數。但是現在我不能改變它的內容的垂直對齊。默認情況下，它將內容移動到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

表格單元格垂直對齊問題

回答

相關問題