Question

我最近正在编写导航下拉菜单。
我到处都添加了style="vertical-align: middle;" 图像和文本仍然不会垂直对齐。
我还需要桌子，所以我可以添加更多td s 我已经完成了尝试，有人会帮助我吗？

<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

使用line-height而不是vertial-align：middle。这应该可以解决问题;）

Answer 2

您可以在<td>内使用 CSS Flexbox 。在<div class="holder"></div>＆amp;内部创建一个新的父<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>

希望这有帮助！

样式 - 在td标记内的标记内垂直对齐图像和文本

2 个答案: