Html 当里面有图像时,HTML垂直对齐表格单元格的内容

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13187366/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:40:11  来源:igfitidea点击:

HTML vertically align content of table cell when there's image inside

htmlvertical-alignmentvalign

提问by John Smith

Is there any way to make text vertically be aligned text Hello World!to middle of table cell without splitting into two cells?

有没有办法使文本垂直对齐Hello World!到表格单元格的中间而不分成两个单元格?

<table border="1">
    <tr>
        <td valign="middle" style="vertical-align:middle;">
            Hello World! <img src="https://www.google.com/images/srpr/logo3w.png" border="1" />
        </td>
    </tr>
</table>

http://jsfiddle.net/U4Qs4/

http://jsfiddle.net/U4Qs4/

回答by user1534664

You need to vertically align the image, not the td element.

您需要垂直对齐图像,而不是 td 元素。

回答by Eric T

Works in Chrome FF and IE7 ....

适用于 Chrome FF 和 IE7 ....

<style>
.mid {
    vertical-align:middle
    }
</style>


<table border="1">
    <tr>
        <td class="mid">
            <img src="https://www.google.com/images/srpr/logo3w.png" class="mid" border="1" />Hello World!
        </td>
    </tr>
</table>