Centering three icons on screen for webpage

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?

Answers


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


Need Your Help

Rails Test & Mocha: How to stub specific model - conditional any_instance?

ruby-on-rails ruby unit-testing mocha

I want to stub just a specific model, but not only a specific object and not every instance

C#: Create a virtual drive in Computer

c# .net virtualization storage virtual-drive

Is there any way to create a virtual drive in "(My) Computer" and manipulate it, somewhat like JungleDisk does it?