Html 在同一表格单元格中垂直和水平居中文本，图像向左浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8856680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
centering text vertically and horizontally in same table cell with image floated left
提问by Brian Zengel
I know this probably seems like a little problem. It just feels like there should be an easy solution. I have a feeling I'm SOL but I figured I'd ask first.
我知道这可能看起来有点问题。只是感觉应该有一个简单的解决方案。我有一种感觉，我是 SOL，但我想我会先问的。
http://jsfiddle.net/bczengel/FSDz9/5/
http://jsfiddle.net/bczengel/FSDz9/5/
Problem:
问题：
When the image is not floated left it has the desired end result where the image and the text are both vertically centered. When you float the image left the image is vertically centered and the text is aligned with the top of the image.
当图像没有向左浮动时，它具有所需的最终结果，其中图像和文本都垂直居中。当您将图像向左浮动时，图像垂直居中，文本与图像顶部对齐。
Requirements:
要求：
- One table cell
- CSS only with the given html (or minimal changes to the html)
- I would like to avoid a line-height solution because the stylesheet is applied to many existing pages some of which have multiple lines in the text
- 一个表格单元格
- 仅使用给定 html 的 CSS（或对 html 的最小更改）
- 我想避免使用行高解决方案，因为样式表应用于许多现有页面，其中一些页面在文本中有多行
回答by Zoltan Toth
with a minimal html change (wrapping your title text in a <p>)
使用最少的 html 更改（将标题文本包装在 a 中<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>回答by user1133972
You could use the negative margin method to vertically center the text. To do that you could put your text in a <span>and have the following css:
您可以使用负边距方法将文本垂直居中。为此，您可以将文本放在 a 中<span>并具有以下 css：
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;
}
table.float td img
{
float: left;
}
table.float td span
{
position: absolute;
top: 50%;
margin-top: -10px; /* or half of the height of your text */
}
