Member Avatar for Gearspro

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:

  • 3 Contributors
  • 2 Replies
  • 91 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by drjohn
Member Avatar for twiss

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

Member Avatar for drjohn

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.