moeseth moeseth - 1 month ago 8
CSS Question

How to align images and text in css?

I would like to align images and text accordingly.

I'm using the following code. Please show me how to do that.



<ul>
<li>
<a href=""><i class="icon-profile"></i> </a>
</li>
<li>
<a href=""><i class="icon-wallet"></i> Wallet</a>
</li>
<li>
<a href=""><i class="icon-home"></i> Home</a>
</li>
<li>
<a href=""><i class="icon-signout"></i> Sign Out</a>
</li>
</ul>





enter image description here

Answer

Set a fixed width for the icons then give it a margin-right, set text-align: center to make the icons center aligned.

ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; }
i.fa {
  width: 20px;
  margin-right: 10px;
  text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<ul>
  <li>
    <a href=""><i class="fa fa-user icon-profile"></i> Profile</a>
  </li>
  <li>
    <a href=""><i class="fa fa-file icon-wallet"></i> Wallet</a>
  </li>
  <li>
    <a href=""><i class="fa fa-home icon-home"></i> Home</a>
  </li>
  <li>
    <a href=""><i class="fa fa-file icon-signout"></i> Sign Out</a>
  </li>
</ul>

Comments