我知道这看起来可能是一个小问题。只是感觉应该有一个简单的解决方案。我有一种感觉，我很 SOL，但我想我应该先问一下。
http://jsfiddle.net/bczengel/FSDz9/5/ http://jsfiddle.net/bczengel/FSDz9/5/
Problem:
当图像不向左浮动时，它具有所需的最终结果，其中图像和文本都垂直居中。当您向左浮动图像时，图像垂直居中，文本与图像顶部对齐。
要求：
- 一个表格单元格
- CSS 仅适用于给定的 html（或对 html 进行最小的更改）
- 我想避免使用行高解决方案，因为样式表应用于许多现有页面，其中一些页面在文本中有多行
进行最小的 html 更改（将标题文本包装在<p>)
table {
width: 500px;
border: solid 1px black;
}
table td {
text-align: center;
vertical-align: middle;
padding: 5px;
position: relative;
}
table td img {
width: 50px;
vertical-align: middle;
display: inline-block;
}
table td p {
display: inline-block;
width: 430px;
background: #ccc;
vertical-align: middle
}
<table>
<tr>
<td>
<img alt="test" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ-nkjB-srUT_dc7brfRDiDSVu8BQa_6TEbQYevP1gy2UkTdcXWzg" />
<p>Title Text</p>
</td>
</tr>
</table>
<br /><br />
<table>
<tr>
<td>
<img alt="test" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ-nkjB-srUT_dc7brfRDiDSVu8BQa_6TEbQYevP1gy2UkTdcXWzg" />
<p>Title Text <br /> on the next line</p>
</td>
</tr>
</table>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
