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.

http://samayr.es/contact/contact.html

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

Recommended Answers

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

Jump to Post

All 2 Replies

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)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.