Align icon and text in one line properly

As an HTML and CSS designer, you would have come across many times to align icon and text properly. Say that you have to display some text and a logo before it. Say you have to display name and icon before it, or an email and email icon. It seems to be good and attractive to have image/icon before displaying text information.

The common problem is icon/image before the text just ‘floats’ at the top of the text. Setting margins on it seem to do nothing or set’s margin to complete text and image which is worthless. Here is the solution to set the correct style to align icon and text in one line.

Let’s show the code to Align icon and text properly.

An HTML programmer have many ways to show an icon and text, I used unordered list UL and LI to show icon and text, and this is one of the good ways I recommend to use. Now use CSS to align icon and text properly.

 <ul id="contact_ul">
 <li id="li_phone"> <ion-icon name="call"></ion-icon><a>8077750432</a></li>
 <li id="li_email"><ion-icon name="mail"></ion-icon><a>skydevelopers.net@gmail.com</a></li>
 </ul>

In the above example, we see the icon/image before the number is floating above the text is improper aligned. Let’s use CSS and show how to properly align it.

 <ul id="contact_ul">
 <li id="li_phone"> <ion-icon name="call"></ion-icon><a>8077750432</a></li>
 <li id="li_email"><ion-icon name="mail"></ion-icon><a>skydevelopers.net@gmail.com</a></li>
 </ul>

#contact_ul{
list-style: none;
-webkit-padding-start: 0px;
}

#li_phone ion-icon{
font-size: 1.0em;
vertical-align: middle;
margin-right: 10px;
padding-top: 9px;
}
#li_email ion-icon{
font-size: 1.0em;
vertical-align: middle;
margin-right: 10px;
padding-top: 1px;
}

Using the vertical-align middle to the icon set the icon to the middle of the text. If still some alignment gap exists then use padding top and padding bottom to adjust icon to the center.

If you still are facing any issues let us know in comments skydevelopers support team will provide you a solution earliest. For any kind of Further information comment below or contact our 24/7 support team. We will be happy to assist your query for free.

consider visiting our website www.skydeveloper.net for any kind of web development.