Выравнивание по вертикали с текстом в div не работает

Question

Вот fiddle.

Из объяснений here, а вот How to use vertical-align: middle; properly? и ... много других, но я просто хочу, чтобы выровнять по вертикали мой текст во всех дивы, которые являются непосредственными потомками класса irow ..

Если я добавьте изображение в стиле vertical-align: middle;, текст, следующий, кажется, выровнен. Если я удалю изображение, текст больше не будет выровнен. Я попытался выполнить предложение here, которое помещает текст в span и применяет vertical-align к пролету без успеха. Я пробовал с hack position:relative;top:50% без успеха. Итак, вот решение, которое выравнивает текст, но, конечно, я хочу, чтобы он работал на всех div и без изображения!

<style> 
.irow > div { 
    height: 80px; 
    min-height: 60px; 
} 
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) { 
    background-color: #2b669a; 
} 
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) { 
    background-color: #46b8da; 
} 
</style> 
<div class="irow"> 
    <div class="col-md-8"> 
     <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg"> 
     Inès va morfler grave 
    </div> 
    <div class="col-md-4"> 
     <a class="btn btn-default btn" href="#" role="button">Go »</a> 
    </div> 
    <div class="col-md-8"> 
     <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg"> 
     Inès que des mots&nbsp;! 
    </div> 
    <div class="col-md-4"> 
     <a class="btn btn-default btn" href="#" role="button">Go »</a> 
    </div> 
</div> 

Любая помощь была бы принята с благодарностью!

Answer 1

есть два способ: 1) имитируют наличие img использования :before:

.irow > div { 
 
    height: 80px; 
 
    min-height: 60px; 
 
} 
 
.irow > div:before{ 
 
    content:""; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    width:0; 
 
    height:80px; 
 
} 
 
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) { 
 
    background-color: #2b669a; 
 
} 
 
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) { 
 
    background-color: #46b8da; 
 
}

<div class="irow"> 
 
    <div class="col-md-8"> 
 
     <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg"> 
 
     Inès va morfler grave 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a class="btn btn-default btn" href="#" role="button">Go »</a> 
 
    </div> 
 
    <div class="col-md-8"> 
 
     <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg"> 
 
     Inès que des mots&nbsp;! 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a class="btn btn-default btn" href="#" role="button">Go »</a> 
 
    </div> 
 
</div>

или 2) просто использовать line-height для одной подкладки текста (не будет работать для многострочного текста):

.irow > div { 
 
    height: 80px; 
 
    min-height: 60px; 
 
    line-height:80px; 
 
} 
 
.irow div:nth-child(4n+1), .irow div:nth-child(4n+2) { 
 
    background-color: #2b669a; 
 
} 
 
.irow div:nth-child(4n+3), .irow div:nth-child(4n+4) { 
 
    background-color: #46b8da; 
 
}

<div class="irow"> 
 
    <div class="col-md-8"> 
 
     <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg"> 
 
     Inès va morfler grave 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a class="btn btn-default btn" href="#" role="button">Go »</a> 
 
    </div> 
 
    <div class="col-md-8"> 
 
     <img style="height:80px; vertical-align: middle; outline: solid 1px #34fffe" src="http://www.animaux.arroukatchee.fr/babouin/babouin.jpg"> 
 
     Inès que des mots&nbsp;! 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a class="btn btn-default btn" href="#" role="button">Go »</a> 
 
    </div> 
 
</div>

быть честным, есть много других способов, например, с помощью display:table-cell или отобразить прогибается, но я не люблю их