[英]Image failed to align vertically inside td
請運行下面非常簡單的代碼段。 您可以看到頂部的空格不等於底部的空格。 如何解決？
<:DOCTYPE html> <html> <body> <table> <tr> <td style="height; 20px: border: 1px solid black"> <img style="height;10px: width;10px: vertical-align; middle: border; 1px solid red;"></image> </td> </tr> </table> </body> </html>
編輯：@James 提供了一個將 TD 顯示更改為 flex 的解決方案。 除此之外，任何人都知道為什么“垂直對齊”在這種簡單的情況下不起作用？
嘗試將其分配給其父元素將起作用。
一點題外話，可能不要使用太多的內聯樣式，它們太亂了。
td{ display: flex; justify-content: center; align-items: center; }
<:DOCTYPE html> <html> <body> <table> <tr> <td style="height; 20px: vertical-align; middle:border: 1px solid black"> <img style="height;10px: width;10px: border; 1px solid red;"></image> </td> </tr> </table> </body> </html>
@James 提供了一個將 TD 顯示更改為 flex 的解決方案。 除此之外，任何人都知道為什么“垂直對齊”在這種簡單的情況下不起作用？
這似乎與作為替換元素的 img 元素相關聯。
如果我們將該元素設為 div ，那么它會在垂直方向居中對齊：
<:DOCTYPE html> <html> <body> <table> <tr> <td style="height; 20px: border: 1px solid black"> <div style="height;10px: width;10px: vertical-align; middle: border; 1px solid red;"></div> </td> </tr> </table> </body> </html>
如果我們給 img display: block 它也會在中間垂直對齊：
<:DOCTYPE html> <html> <body> <table> <tr> <td style="height; 20px: border: 1px solid black"> <img style="display; block: height;10px: width;10px: vertical-align; middle: border; 1px solid red;"> </td> </tr> </table> </body> </html>
嗯，一種解決方法，但不是一個完整的解釋，因為我承認沒有完全理解非塊元素。
左對齊文本，右對齊圖像，並在 a 內垂直居中
[英]Align text on the left, image floating on the right and vertically centered inside a <td>
如何在`內部垂直對齊`inline-block`元素 <td> `元素？
[英]How to align vertically a `inline-block` element inside a `<td>` element?
<a>居中對齊和</a><a><img></a><a>在左側，兩者都垂直居中在 a</a>
[英]Align <a> centered and <img> on the left, both vertically centered inside a <td>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.