Выравнивание изображения в ряду divs

Question

У меня есть ряд разделов, которые бы хотели, чтобы изображения были вертикальными и горизонтальными.

<div id="treatments-wrapper"> 
       <div class="heading"> 
        <h2>Our Treatments</h2> 
       </div> 
       <div class="treatments-logo"> 
        <a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a> 
       </div> 
       <div class="treatments-logo"> 
        <a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a> 
       </div> 
       <div class="treatments-logo"> 
        <a href="#"><img src="img/nouveau-logo.png" alt="nouveau logo"></a> 
       </div> 
      </div><!--treatments-wrapper--> 




#treatments-wrapper { 
    width:960px; 
    height:100px; 
    float: left; 
    margin: 10px 0; 
    border-bottom: #373839 solid 10px; 
} 

.treatments-logo { 
    width: auto; 
    height: 60px; 
    float: left; 
    margin: 0 8px; 
} 

.treatments-logo img { 
    display: block; 
    margin: auto; 
} 

.heading { 
    width:960px; 
    height: 40px; 
    background-color: #373839; 
    float: left; 
    margin: 
} 

Здесь на jsfiddle

Для этого примера я использовал то же изображение в 3 раз, но это будет рядом различных логотипов, все с различной высотой и шириной. Может ли кто-нибудь предложить что-то, что я мог бы попробовать?

Answer 1

попробовать дисплей: настольная камера; с вертикальным выравниванием: среднее;

.treatments-logo { 
    width: 1%; 
    display:table-cell; 
    height: 60px; 
    vertical-align:middle; 
} 

Answer 2

Я думаю, что это то, что вы после этого - я удалил отдельные div «S для каждого изображения и сделал treatments-logo класс контейнера.

HTML

<div class="treatments-logo"> 
    <a href="#"> 
     <img src="https://dl.dropboxusercontent.com/u/37491564/nouveau-logo.png" alt="nouveau logo"/> 
    </a> 
    <a href="#"> 
     <img src="https://dl.dropboxusercontent.com/u/37491564/nouveau-logo.png" alt="nouveau logo"/> 
    </a> 
    <a href="#"> 
     <img src="https://dl.dropboxusercontent.com/u/37491564/nouveau-logo.png" alt="nouveau logo"/> 
    </a> 
</div> 

Я затем изменил эти два класса CSS к этому:

CSS

.treatments-logo { 
    height: 60px; 
    margin: 0 auto; 
    text-align: center; 
} 
.treatments-logo img { 
    display: inline-block; 
} 

Вот Fiddle: http://jsfiddle.net/6jGTW/

Надеюсь, это поможет!