How to align images and text in css?

Question

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>

create a demo with relevant code – G.L.P Nov 04 '16 at 05:41 — G.L.P, Nov 04 '16 at 05:41
can you add your code with in fiddle – prasanth Nov 04 '16 at 05:42 — prasanth, Nov 04 '16 at 05:42
use debugger option to see the style applied. – Ramakrishnan Nov 04 '16 at 06:10 — Ramakrishnan, Nov 04 '16 at 06:10

score 0 · Answer 1 · edited May 23 '17 at 12:19

If you're looking to make the bullet points icons:

Using Font Awesome icon for bullet points, with a single list item element

https://www.sitepoint.com/use-webfont-icons-bullet-points-html5-lists/

http://techforluddites.com/replacing-list-bullets-with-images-using-css/

Otherwise if you're looking for specific alignment of two different elements:

Vertically align text next to an image?

how to vertically align text next to a floated image?

Hope these links help. Best of luck! :)

prasanth · Answer 2 · 2016-11-04T06:02:29.880

Are you getting like this:

In this code i am using font awesome More icon's library are available

1.https://material.io/icons/

2.http://www.w3schools.com/icons/

ul{list-style:none;}
a{text-decoration: none;}
ul a i{
padding-left:10px;
  margin:0 20px auto;
  text-indent:2px;
  
  }

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

score 0 · Accepted Answer · answered Nov 04 '16 at 06:56

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>

score 0 · Answer 4 · answered Nov 04 '16 at 08:10

0

CSS vertical-align property solves it.

a { vertical-align: middle; }

answered Nov 04 '16 at 08:10

Rahul

493
6
27

How to align images and text in css?

4 Answers4