Centering three icons on screen for webpage - html

Question

I am trying to achieve the following configuration of elements for a webpage:
[Left Icon Image]<-padding->[Horizontally Centered Icon Image]<-padding->[Right Icon Image]
Each icon has some text below it which is centered relative to it's own center What is the best way to achieve this using HTML and CSS?

Answer 1

You didn't post any code so normally I wouldn't help but since this isn't that hard and there are many ways to do this I will show you one.
HTML:
<div id="con">
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>Text under the first one</span>
</div>
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>Test under the second</span>
</div>
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>And third</span>
</div>
</div>
CSS:
#con {
width: 600px;
height: 200px;
margin: 0 auto;
}
#con div {
width: 200px;
height: 200px;
float: left;
text-align: center;
}
#con div img {
width: 200px;
}
So here we create 3 "boxes" that will contain each image with text. We set the width and height then use float. Now we need to put them in a container so we can center them using margin: 0 auto;.
From there it's just get the image you want in the boxes and type your text under it. I put a span so you can see where it is a bit better + you can style it using the span.
DEMO HERE
Here is one with a margin around each so they push away from eachother. Don't want to use padding as that's inside the element (I guess you could but margin would be better).
CSS:
#con {
width: 660px;
height: 200px;
margin: 0 auto;
}
#con div {
width: 200px;
height: 200px;
float: left;
text-align: center;
margin: 0 10px;
}
We added a margin to #con div and then have to change the #con width to account for the newly added 60px caused by the margin.
DEMO HERE