将表格单元格中的文本与浮动到左侧的图像垂直对齐？
html：
<td>
<img>
text here
</td>
css：
td img{
display: block;
float: left;
}
我希望图片在单元格内向左浮动，文本垂直居中对齐。如果没有图片，文本会自动垂直居中对齐，但有了图片，我似乎无法更改文本的垂直对齐方式。
有什么想法吗？
The html:
<td>
<img>
text here
</td>
The css:
td img{
display: block;
float: left;
}
I want the picture to be floated to the left within the cell, and the text to be vertically-aligned to the middle. Without the picture there, the text is automatically vertically aligned to the middle, but with the picture there I can't seem to change the vertical alignment of the text.
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您知道图像本身的高度，则可以使用 line-height 属性。
这应该强制文本显示在行高的中心。
If you know the height of the image itself you can use the line-height property.
This should force the text to be displayed in the center of the line-height.
尝试在
img的 CSS 中设置vertical-align:middle;。您可能还需要考虑将该图像设置为该表格单元格的背景，因为无论您如何放置所有内容，都可能会遇到跨浏览器问题（将图像设置为背景可以避免这种情况）。Try setting
vertical-align:middle;in the CSS for theimg. You may also want to consider setting that image as a background to that table cell, as you may have cross-browser issues regardless of how you position everything (setting the image as a background would avoid this).仅当您只有一行文本时，才可以使用 line-height 垂直对齐表格单元格内图像旁边的文本。下一行文本将位于第一行文本下方 50 像素（如上例所示）。*
将*图像设置为背景*d 也不起作用，除非您设置单元格内的边距 = 图像宽度（无论您希望图像对齐哪一侧）。
Using line-height to vertically align text next to an image within a table cell onl*y works if you have one line of text. The next line of text will be (as in the example above) 50px below the first line of text.*
Setting the *image as backgroun*d also does not work unless you set a margin within the cell = to the width of the image on whichever side you want the image to align.