3 images in a row centered in container

Question

CSS

.contain {
max-width:960px;
text-align:center;
}

.category {
position:relative;
display: inline-block;
float:left;
padding:10px;
}

.category2 {
position:relative;
display: inline-block;
pading:10px;
}
.category3 {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}

HTML

        <div align="center" class="category">
        <img src="gemstoneshomebutton.png" />
        </div>
        <div align="center" class="category2">
        <img src="dichroichomebutton.png" />
        </div>
        <div align="center" class="category3">
        <img src="filigreehomebutton.png" />

</div>

i am trying to align 3 images that are 309 px wide , by 111 px high inside a container div, and they don't align center and also the third image jumps down below the other two images. I've tried to adjust the width of the container and the 3 divs, I've tried tables and changing the width on the actual html with no success.

This is my first time working with divs and i thought they would be easier, perhaps my math is off when assigning widths, or maybe I'm just structuring it all wrong.![here is an example of what i am trying to achieve, the three categories in the picture here.] http://i49.tinypic.com/2r2uqso.jpg

any and all help would be appreciated.

Solution 1

Don't forget to add 'alt' attribute in the img tag! It is especially important for people who a partially sighted or blind.

http://www.myblogsplace.com/images-alt-text

Solution 2

Yes the alt attribute is really important. It is actually used by "screen reader" software so when a person is listening to the content of a webpage, like a blind person, can interact with that specific element. All images should have this attribute so it is accessible.