スタイリング - tdタグ内のタグ内にイメージとテキストを垂直に整列させる

Question

最近、ナビゲーションドロップダウンメニューをコーディングしています。
どこにでもstyle="vertical-align: middle;"を追加します。
イメージとテキストは、依然として垂直に中央に配置されません。
テーブルがまだ必要なので、私はさらにtdを追加できます。
私はやってみました、誰かが親切に私を助けてくれますか？

<style> 
 
a:hover { 
 
    background-color: rgba(203, 227, 255, 0.625) !important; 
 
} 
 
</style> 
 

 
<table align="center" class="exc"> 
 
<tr> 
 
<td class="null" style="white-space:nowrap; vertial-align: middle; overflow:hidden; border-radius: 50px; border: 2px solid #87ceeb !important; background-color: rgba(224, 255, 255, 0.625);"> 
 
<a href="https://example.com" style="display:inline-block; text-decoration: none; color: #6699cc;"> 
 
<font size="6">&#160; 
 
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/128/home-icon.png" width="48px" style="vertial-align: middle; width=100%; height:100%;" /> 
 
&#160;HOME&#160;&#160;&#160;</font> 
 
</a> 
 
</td> 
 
<td class="null" style="white-space:nowrap; vertial-align: middle; overflow:hidden; border-radius: 50px; border: 2px solid #87ceeb !important; background-color: rgba(224, 255, 255, 0.625);"> 
 
<a href="https://example.com" style="display:inline-block; width=100%; height:100%; text-decoration: none; color: #6699cc;"> 
 
<font size="6">&#160;&#160;&#160;HOME&#160;&#160;&#160;</font> 
 
</a> 
 
</td> 
 
</tr> 
 
</table>

Answer 1

CSSフレックス<td>の内側に使用することができます。新しい親の<div class="holder"></div>を<td> &の中に入れて、イメージとテキストをその内部にラップします。

同様：

<div class="holder"> <!-- Flex Container --> 
    <img src="your-img"> 
    YOUR TEXT 
</div> 

はそれを正しく理解するには、以下のスニペットを見てください：

a:hover { 
 
    background-color: rgba(203, 227, 255, 0.625) !important; 
 
} 
 

 
.second-td:hover { 
 
    background-color: rgba(203, 227, 255, 0.625) !important; 
 
} 
 

 
.holder { 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 10px 0; 
 
    font-size: 25px; 
 
}

<table align="center" class="exc"> 
 
<tr> 
 
<td class="null" style="white-space:nowrap; vertial-align: middle; overflow:hidden; border-radius: 50px; border: 2px solid #87ceeb !important; background-color: rgba(224, 255, 255, 0.625);"> 
 
<a href="https://example.com" style="display:inline-block; text-decoration: none; color: #6699cc;"> 
 
<div class="holder">&#160; 
 
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/128/home-icon.png" width="48px" style="vertial-align: middle; width=100%; height:100%;" /> 
 
&#160;HOME&#160;&#160;&#160;</div> 
 
</a> 
 
</td> 
 
<td class="null second-td" style="white-space:nowrap; vertial-align: middle; overflow:hidden; border-radius: 50px; border: 2px solid #87ceeb !important; background-color: rgba(224, 255, 255, 0.625);"> 
 
<a class="hoder" href="https://example.com" style="width=100%; height:100%; text-decoration: none; color: #6699cc;"> 
 
<div class="holder">&#160;&#160;&#160;HOME&#160;&#160;&#160;</div> 
 
</a> 
 
</td> 
 
</tr> 
 
</table>

・ホープ、このことができます！

Answer 2

使用行の高さの代わりにvertial-ALIGN：ミドル。それはそのトリックを行う必要があります;）