垂直對齊內部表

Question

我試圖垂直對齊圖像和文本內部1 <td>。我知道這可以工作，如果我把圖像放在1 <td>，而文本在另一個，它只是複製，並有大約50行。基本的HTML：

<td> 
    <img src="img.png" /><strong>Headline!</strong><br />Supporting blurb, not bolded. 
</td> 

CSS的是在這裏：

td { 
    padding: 0.5em 0; 
    text-align: left; 
    vertical-align: middle; 
} 

td img { 
    float: left; 
    margin-right: 1em; 
    max-width: 48px; 
    vertical-align: middle; 
    width: 20%; 
} 

確定，所以在目前的狀態下，IMG（這是比文本高）是垂直排列的，但文字似乎是一致到頂部。如果我拿出br並將文本行放在單獨的p標籤中，它看起來是一樣的。如果我從img中取出浮標，它和強文本都是垂直居中的，但是在br之後，它顯然會進入一個新的行，這在圖像下面。我希望它有img和文本垂直對齊...但文本要在強標記之後換行。

我看了很多答案，沒有任何作品。

Answer 1

這只是正常（你錯過了<table></table>）：

$(document).ready(function() { 
 
    var textHeight = $("#text-container").height(); 
 
    var imgHeight = $("table td img").height(); 
 
    var padding = (imgHeight - textHeight)/2; 
 
    $("#text-container").css('padding-top',padding + 'px'); 
 
});

td { 
 
    padding: 0.5em 0; 
 
    text-align: left; 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
td img { 
 
    float: left; 
 
    vertical-align: middle; 
 
    margin-right: 1em; 
 
    max-width: 48px; 
 
    width: 20%; 
 
    height:auto; 
 
} 
 

 
#text-container { 
 
    float:right; 
 
    padding-top:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <td> 
 
    <img src="http://placehold.it/50x100"> 
 
    <div id="text-container"> 
 
     <strong>Headline!</strong> 
 
     <br />Supporting blurb, not bolded. 
 
    </div> 
 
    </td> 
 
</table>

工作的jsfiddle還有：http://jsfiddle.net/33xyt4ok/

顯然刪除/添加要正確的高度，只是用100px顯示vertical-align正在工作。