I did see a similar post on here about this, but it with mixed with javascript also and I found it confusing.

So if someone could help it would be much appreciated.

I wish to align my icons on my contact page like this:

http://samayr.es/contacts.png (it's easier to just show a picture than to explain)

but for some reason I can only get them to be centered all in line underneath one another.

and heres the html version as shown with my problem.


any ideas on correcting this problem? please and thank you c:

6 Years
Discussion Span
Last Post by drjohn

As a start, you need to give them display:inline-block; and a width (probably 150px), and the parent should have text-align:center; .


Create a div, give it a class name, a width equal to the four icons plus any padding between them, and margin :auto
float the img / icon in the div left.
add the text in another div below this (same class name)
add the next set of icons in another div below this. (same class name)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.