Page 1 of 1

How do you like up images and text with <li>?

Posted: Fri Feb 20, 2015 1:43 pm
by simonmlewis
http://stackoverflow.com/questions/1862 ... rizontally
I'm trying to do what I see on many web sites, with a little icon is next to a text line, and then are perfectly lined up - ie, the bottom of the text isn't baseline ot the image, but lined up nice.

IS this page similar? Or is there a way to do it but with text and an image?

Code: Select all

<style>
#full_image {    
  margin:0;
  padding:0;    
  list-style:none; 
  white-space: nowrap;
  overflow:hidden; 
  position:absolute;
 }

#full_image  li {  
  display: inline;
}
#full_image  li img{  
  margin:0 auto; 
  max-width:100%
}
</style>

<ul id="full_image"> 
  <li><a href="#"><img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" width='50px'/>hi </a></li> 
  <li><a href="#">Welcome</a></li> 
 
 </ul>

Re: How do you like up images and text with <li>?

Posted: Fri Feb 20, 2015 1:48 pm
by Celauran
Do you have an example of what you're trying to achieve?

Re: How do you like up images and text with <li>?

Posted: Fri Feb 20, 2015 1:51 pm
by simonmlewis
Here's a hosting company in the UK.
Look at the little icons in the footer.
https://www.34sp.com/

Re: How do you like up images and text with <li>?

Posted: Fri Feb 20, 2015 1:55 pm
by Celauran

Re: How do you like up images and text with <li>?

Posted: Fri Feb 20, 2015 2:10 pm
by simonmlewis
Brilliant. thank you.