What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

how to make image and text centered

ebeh

New member
I want to make a table of icons with accompanying text to its right, like the following:

a (1).png

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


a (2).png

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.
 
Back
Top