I want to make a table of icons with accompanying text to its right, like the following:
These icons are svg files that I downloaded from Font Awesome.
The code I have at the moment is
I want both the text and the icons to be vertically centered, as in this image (the thin black horizontal lines as a visual aid):
The css rules found inside the
The svg files can be found in the "icons" directory in the code pen project I created for this question.
These icons are svg files that I downloaded from Font Awesome.
The code I have at the moment is
<style>
td {
height: 30px;
vertical-align: middle;
}
th td {
text-align: center;
}
</style>
<section style="background-color: #f5dd9d; padding: 8px; border-radius: 10px;">
<table>
<tbody>
<tr>
<td><img height="16px" src="icons/map-marker.svg"></td>
<td style="vertical-align: middle;">35 Theron St., North Karianne</td>
</tr>
<tr>
<td><img height="16px" src="icons/mobile.svg"></td>
<td>+1-843-905-2931</td>
</tr>
<tr>
<td><img height="16px" src="icons/envelope.svg"></td>
<td>john.doe@mail.com</td>
</tr>
<tr>
<td style="text-align: center;"><img height="16px" src="icons/link.svg"></td>
<td>linkedin.com/in/john-doe</td>
</tr>
</tbody>
</table>
</section>
I want both the text and the icons to be vertically centered, as in this image (the thin black horizontal lines as a visual aid):
The css rules found inside the
<style> element are not solving this problem.The svg files can be found in the "icons" directory in the code pen project I created for this question.
