Allinea 3 elementi in css - html, css

Ho 3 elementi che voglio allineare al miofile html. Ho allegato un'immagine campione, la prima immagine ha solo un margine sinistro ed è centrata verticalmente. l'elemento centrale è centrato verticalmente e orizzontalmente e il terzo elemento ha il margine destro ed è centrato verticalmente.

Posso allineare in modo indipendente gli elementi orizzontalmente e verticalmente con il codice seguente:

#element{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}

ma quando si tratta di allineare elementi l'uno con l'altro, non si posizionano correttamente.
Apprezzerò se mi puoi aiutare con questo.
Grazie mille

risposte:

Puoi provare quanto segue:

.left_item {
float: left;
width: 10%;
}
.right_item {
float: right;
width: 10%;
}
.center_item {
float: left;
width: 80%;
}

Sono riuscito a risolverlo con il seguente codice:

<header id="header">
<div id="element1Container">
<img id="element1" src="/images/http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element2Container">
<img id="element2"     src="/images/http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element3Container">
<img id="element3" src="/images/http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
</header>

ed ecco il css:

#header{
background:#2b2b2b;
height : 8.5%;
width : 100%;
position : absolute;
}
#header #element1Container{
position : relative;
height : 100%;
width : 25%;
float : left;
}
#header #element1Container img{
height : 65%;
top : 50%;
position : relative;
float : left;
margin-left : 4%;
transform : translate(0,-50%);
}
#header #element2Container{
position : relative;
float : left;
height : 100%;
width : 50%;
}
#header #element2Container img{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}
#header #element3Container{
position : relative;
float : right;
height : 100%;
width : 25%;
}
#header #element3Container img{
height : 65%;
top : 50%;
position : relative;
float : right;
margin-right : 4%;
transform : translate(0,-50%);
}