垂直对齐内部表

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正在工作。