3 Bilder in einer Zeile zentriert im container

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>

ich versuche es zu schließen 3 Bilder, 309 px breit , 111 px hoch in einen div-container,
und Sie nicht zentriert und auch das Dritte Bild springt nach unten die anderen beiden Bilder.
Ich habe versucht, passen Sie die Breite des Containers und die 3 divs, die ich habe versucht, Tabellen und ändern Sie die Breite auf die tatsächliche html-ohne Erfolg.

Dies ist meine erste Zeit mit divs und ich dachte, Sie wäre einfacher, vielleicht meine Mathe-ist aus, wenn die Zuordnung breiten, oder vielleicht bin ich nur der Strukturierung ist es alles falsch.![hier ist ein Beispiel von, was ich versuche zu erreichen ist, werden die drei Kategorien in der Bild hier.] http://i49.tinypic.com/2r2uqso.jpg

jeder
und alle Hilfe würde geschätzt.

InformationsquelleAutor user2255322 | 2013-04-07