Placer plusieurs images dans divs sur une autre div

Question

Je suis en train de mettre en place une barre de navigation qui ressemble à ceci:

http://s7.postimage.org/jhfi6rbp7/gallerybar.jpg

Toutes les places sont des images distinctes que je veux aligner à gauche une balise div contenant la barre orange .jpg.

C'est ce que j'ai jusqu'à présent:

<div id="rule"> 
    <img src="../images/rule2.jpg" width="750" height="1" > 
    <div id=" gallery"> 
     <img src="../images/portfolio/gallery_bplogo_active.jpg" alt="Logo Design"  width="112" height="112"/> 
     <img src="../images/portfolio/gallery_bpprint.jpg" width="112" height="112" alt="Magazine and Newspaper Ads" /> 
     <img src="../images/portfolio/gallery_bpradio.jpg" width="112" height="112" alt="Radio Spot" /> 
     <img src="../images/portfolio/gallery_bptelevision.jpg" width="112" height="112" alt="TV Spot" /> 
     <img src="../images/portfolio/gallery_bpvehiclewrap.jpg" width="112" height="112" /> 
    </div> 
</div> 

#rule { 
    border:0; 
    text-align: center; 
} 

#gallery { 
    height: 115px; 
    margin: 20px; 
    position: absolute; 
    border: 20 px; 
    border-color:#FFF; 
} 

Je ne peux pas comprendre comment centrer verticalement les images sur la barre - ils insistent sur flottant juste au-dessous.

Answer 1

Essayez la solution suivante http://jsfiddle.net/chrisdanek/CN3Tb/

#gallery { 
    padding: 0 20px; 
    position: relative; 
} 
#gallery img { 
    position: relative; 
    background: #fff; 
} 

#gallery:before { 
    position: absolute; 
    content: ""; 
    border: 1px solid orange; 
    top: 50%; 
    left: 0; 
    right: 0; 
} 

<div id="gallery"> 
    <img src="image.jpg" width="112" height="112"> 
    <img src="image.jpg" width="112" height="112"> 
    <img src="image.jpg" width="112" height="112"> 
    <img src="image.jpg" width="112" height="112"> 
</div> 

J'ai supprimé le balisage inutile et simplifié votre CSS.

Answer 2

Essayez ceci:

#gallery img {float: left; margin-right: 10px;} 

Answer 3

Votre image doit être aligné dans la balise img.

img { 
    vertical-align:middle; 
}