我嘗試在td標簽內對齊我的影像，使其與我的文本具有相同的高度/布局？感謝你
到目前為止我的代碼：
<table style="border-bottom: 0px solid #ddd; margin-top: 20px;">
<tr>
<td id="instagram">
<a href="https://www.instagram.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/instagram-social-media-camera-photo_icon-icons.com_59107.png" alt="Instagram" width="15%" /></a> Instagram</td>
<td id="facebook">
<a href="https://www.facebook.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/facebook-letter-social-media-f_icon-icons.com_59105.png" alt="Facebook" width="15%" /></a> Facebook</td>
<td id="twitter">
<a href="https://www.twitter.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/twitter-bird-animal-social-media_icon-icons.com_59106.png" alt="Twitter" width="15%" /></a> Twitter</td>
<td id="youtube">
<a href="https://www.youtube.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/youtube-video-social-media-play_icon-icons.com_59108.png" alt="Youtube" width="15%" /></a> Youtube</td>
</tr>
<tr>
<td id="tinytext" colspan="4"> Follow for more </td>
</tr>
</table>uj5u.com熱心網友回復：
如果您希望影像與文本高度相同，可以使用height: 1em. em相對于元素的字體大小。在這種情況下是 16 像素（字體大小是 16 像素，影像高度是 16 像素）。
它可能會有所不同，因為問題是您的影像周圍有一些空白/透明空間- 所以看起來它們的高度不同。另一個問題可能是字體。字體有不同的線基，而且看起來高度也不一樣。因此，您可能需要調整影像高度以使其看起來更像相同的高度，而不是具有相同的高度（例如height: 1.25em，添加一些margin或可能vertical-align在表格中或使用flex等）
img {
height: 1em;
}<table>
<tr>
<td id="instagram">
<a href="https://www.instagram.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/instagram-social-media-camera-photo_icon-icons.com_59107.png" alt="Instagram"></a>
Instagram
</td>
<td id="facebook">
<a href="https://www.facebook.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/facebook-letter-social-media-f_icon-icons.com_59105.png" alt="Facebook"></a>
Facebook
</td>
<td id="twitter">
<a href="https://www.twitter.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/twitter-bird-animal-social-media_icon-icons.com_59106.png" alt="Twitter"></a>
Twitter
</td>
<td id="youtube">
<a href="https://www.youtube.com"><img src="https://cdn.icon-icons.com/icons2/640/PNG/512/youtube-video-social-media-play_icon-icons.com_59108.png" alt="Youtube"></a>
Youtube
</td>
</tr>
</table>像素完美影像示例：
img {
height: 1em;
}This is my text <img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" />感覺更像是相同高度的示例（使用 flex 使其在垂直方向居中）：
div {
display: flex;
align-items: center;
}
img {
height: 0.8em;
}<div>
UPPERCASE TEXT <img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" />
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/366652.html
上一篇：Python-影像差異分數