Jump to content



Photo

CSS - Aligning images horizontally

css align html

  • Please log in to reply
6 replies to this topic

#1 Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 3
  • Joined: 03-September 04

Posted 01 October 2013 - 12:46

I'm new to CSS and am trying to figure out what the best way is to align 3 or more images horizontally with some text on the top.

 

Something like this:

 

SVHuYJk.jpg

 

 

live example on Winamp website (follow us box, right side):

http://www.winamp.com/

 

I searched everytwhere on the web but I stumbled on a lot of unnecessary stuff for Wordpress etc... Until now I have just this but no CSS:

<div id="social">
<p>FOLLOW US ON SOCIAL SITES</p>
    <ul>
    <li><a href="http://www.youtube.com/user/example"><img src="images/youtube.png" alt="youtube"></a></li>
    <li><a href="http://www.twitter.com/example"><img src="images/twitter.png" alt="twitter"></a></li>
    <li><a href="http://www.facebook.com/example"><img src="images/fb.png" alt="facebook"></a></li>
     </ul>
</div>

Thanks!




#2 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 01 October 2013 - 12:54

#social ul li {
float:left;
}

/* or */ 

#social ul li {
display:inline-block;
}


#3 OP Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 3
  • Joined: 03-September 04

Posted 01 October 2013 - 14:53

Very hard to do it! :blush: Thank you and God Bless!



#4 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 01 October 2013 - 14:58

inline-block wont work under ie6 and will work only for inline level elements under ie7 (li is a block level element).

 

If you need ie6 and ie7 support use the first option.



#5 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 22
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 01 October 2013 - 15:40

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

#6 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 01 October 2013 - 15:56

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

I would say Ie8+ is pretty good browser support :p. While it does depend on the situation, it does save you from having to deal with clearing floats. 



#7 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 01 October 2013 - 16:09

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

 
Well you don't always need or even want to support ie6 and ie7.
 
What he really wants to do is changing the display to inline-block. Float removes the elements from the normal flow of the web page and float it right or left. It can cause display problems if you don't properly understand what float is and what it does specially if you over use it in context it should not really be used.
 
My advise is to use inline-block because this is what he wants to do. If ie6 and ie7 support is really needed then float could be used or the list dropped. The list makes sense as far as semantic goes but when you want to support ie6 you must be ready to cut some corners.