ll55 ll55 - 19 days ago 8
CSS Question

Styling - vertical-align image and text inside a tag inside td tag

I am recently coding a navigation dropdown menu.

I add

style="vertical-align: middle;"
everywhere.

The image and text still won't align middle vertically.

I need the table still there so I can add more
td
s.

I'm done trying, would someone kindly help me?



<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

You can use CSS Flexbox inside of <td>. Make a new parent <div class="holder"></div> inside of <td> & wrap the image and text inside of it.

Like:

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

Have a look at the snippet below to understand it properly:

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>

Hope this helps!