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?
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.
<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>
#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.
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).
#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.
