CODEWITHSUNDEEP
htmlcss
whatever
whatever

Reputation: 342

aligning image with anchor in listitem

I have created list of links as such

 <ul style="font-size: 10px; cursor: pointer; display: block;" class="links">
   <li>
       <img src="http://www.google.com/s2/favicons?domain=api.jquery.com"
        style="display:inline-block;"> 
       <a href="" style="color: blue; cursor: pointer; background:
       white;">.append() | jQuery API Documentation</a>
   </li>
   <li>
       <img src="http://www.google.com/s2/favicons?
       domain=www.startutorial.com" style="display:inline-block;"> 
       <a href="" style="color: blue; cursor: pointer; background: 
       white;">DropzoneJs + PHP: How to build a file upload form </a>
   </li>
</ul>

the problem is that the a aligns with the bottom of the img. I want it to align with the top. I tried float but that messes the whole layout and then will have to apply the .clearfix hacks which does not look very nice. Is there any other solution?

Upvotes: 0

Views: 66

Answers (2)

htifcs
htifcs

Reputation: 187

I use a {vertical-align: top;}. Vertical-align works great for this type of issue.

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Try vertical-align:top

a{
  vertical-align:top
    }
<ul style="font-size: 10px; cursor: pointer; display: block;" class="links">
   <li>
       <img src="http://www.google.com/s2/favicons?domain=api.jquery.com"
        style="display:inline-block;"> 
       <a href="" style="color: blue; cursor: pointer; background:
       white;">.append() | jQuery API Documentation</a>
   </li>
   <li>
       <img src="http://www.google.com/s2/favicons?
       domain=www.startutorial.com" style="display:inline-block;"> 
       <a href="" style="color: blue; cursor: pointer; background: 
       white;">DropzoneJs + PHP: How to build a file upload form </a>
   </li>
</ul>

Upvotes: 2

Related Questions