造型 - 垂直对齐图像和td标签内的标签内的文本

我最近编码导航下拉菜单。
我在每个地方都加上style="vertical-align: middle;"。
图像和文字仍然不会垂直对齐中间。
我需要的表格仍然存在，所以我可以添加更多td s。
我完成了尝试，有人会帮助我吗？造型 - 垂直对齐图像和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>

来源

2016-11-19 Louis55

您可以使用CSS Flexbox内<td>。在<td> &内部制作一个新的父母<div class="holder"></div>将图像和文字包裹在其中。

像：

<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>

希望这有助于！

来源

2016-11-19 05:37:28

感谢您的慷慨帮助，并在短时间内做出回应！ – Louis55

@ ll55我的荣幸！ –

使用的line-height代替vertial对齐：中间。这应该做的伎俩;）

来源

2016-11-19 05:27:55

造型 - 垂直对齐图像和td标签内的标签内的文本

回答

相关问题