Apologies if this question has already been asked, but I've checked several similar inquiries in an attempt to merge the solution without much luck. I currently have a bootstrap row with two col-md-6's. The first column contains an image, while the second column holds a list. What I'm aiming for is to vertically center the list in relation to the image.
This is what my HTML structure looks like:
<div class="row ">
<div class="col-md-6">
<img class="img-responsive" src="500-by-700-image.jpg" >
</div> <!-- col-md-6 -->
<div class="col-md-6" >
<h4 style="font-size: 20px; line-height: 2; ">
My header:
<br>
<ul style="text-align: left; ">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</h4>
</div> <!-- col-md-6 -->
</div> <!-- row -->
If you have any suggestions on how this can be achieved, I'd appreciate it. Thank you.