вертикальное выравнивание в css

Question

Я использую бутстрап. Вот пример кода, который я использую.

<div class="row"> 
    <div class="col-lg-6"><img src="#" alt=""></div> 
    <div class="col-lg-6"> 
     <h2>Heading</h2> 
     <p>Some Text</p> 
     <p>Some more text</p> 
    </div> 
</div> 

Эти теги p имеют несколько строк текста. Изображение, которое слева, намного больше, чем текстовая область, поэтому я хотел бы, чтобы эти элементы были выровнены по вертикали. Вот то, что я пробовал:

1. The table/table-cell trick. 
2. The transform/Translatey trick. 
3. Setting margin-top to 50% (didn't think that would work). 
4. flex and align-items/justify-content. 

Проблема заключается в следующем, родительский элемент не будет иметь высоту так каждое решение я нашел в Интернете и через StackOverflow, кажется, не работает для меня. Я ценю любую помощь в этом. Любая помощь будет оценена.

Заранее спасибо

Answer 1

Если вы можете обернуть эти пункт в div, то вы можете использовать следующие решения. col-lg-6 изменен на col-xs-6, чтобы показать левый-правый макет в фрагменте кода.

.outer { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 

 
.middle { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row outer"> 
 
    <div class="col-xs-6 middle"><img src="https://s-media-cache-ak0.pinimg.com/236x/f6/16/d0/f616d044c7937dde2e8ec2b4f3e6f79c.jpg" alt=""></div> 
 
    <div class="col-xs-6 middle"> 
 
     <div class="inner"> 
 
     <h2>Heading</h2> 
 
     <p>Some Text</p> 
 
     <p>Some more text</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>