I am having trouble centering the span and text vertically (and horizontally) inside a button that contains 7 icon links within a table. I have already made the icons bigger using the "class=bigger".
<div class="container-fluid">
<div class="container d-flex d-inline-flex align-self-center">
<table id="main_menu" class="table">
<tbody>
<tr><td colspan="2"><a href='nasbrowser/index.php' class="btn btn-light btn-lg btn-block"><span class="bigger">🧬</span> GATK analysis </a></td></tr>
<tr><td><a href='nasbrowser/index.php' class="btn btn-light btn-lg btn-block">
<span class="bigger">💽</span> NAS browser</a></td>
<td><a href='nasbrowser/index.php' class="btn btn-light btn-lg btn-block"><span class="bigger">📊</span> Variant browser </a></td></tr>
<tr><td><a href='nasbrowser/index.php' class="btn btn-light btn-lg btn-block" ><span class="bigger">📑</span> Anotator</a></td>
<td><a href='nasbrowser/index.php' class="btn btn-light btn-lg btn-block"><span class="bigger">✂</span> Gene filterer</a></td></tr>
<tr><td><a href='nasbrowser/index.php' class="btn btn-light btn-lg btn-block"><span class="bigger">🎯</span> Coverage</a></td>
<td><a href='nasbrowser/index.php' class="btn btn-light btn-lg btn-block"><span class="bigger">🛌</span> Bed uploader</a></td></tr>
</tbody>
</table>
</div>
This is the result: https://i.sstatic.net/2jovf.png
The underlined text is not vertically centered with the icon (I made green dot where I want the text).