css中的垂直对齐

Question

I am using bootstrap. Here is a sample of the code I'm using.

<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>

Those p tags have multiple lines of text. The image that is to the left is much larger than the text area, so I would like those elements to be vertically aligned. Here is what I have tried:

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.

Problem is this, the parent element will not have a height, so every solution I found online and through StackOverflow do not seem to work for me. I appreciate any assistance in this. Any help will be appreciated.

Thanks in advance

Answer 1

If you can wrap those paragraph into div then you can use following solution. col-lg-6 is changed to col-xs-6 just to show left-right layout in the code snippet.

 .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>