Bootstrap vertical align header

MaxMara Published at Dev

MaxMara

Tried many things and looked at some answers here, but it didn't work. I try to vertical align a header to an image. Please take a look at my Bootply at: http://www.bootply.com/SEKp0kHvfX

Edit: Here's also the code:

<div class="container">
  <div class="row">
<div class="col-md-2">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=150&amp;h=150">
</div>
<div class="col-md-4">
     <h2>Please align me! :)</h2>
</div>    
  </div>
</div>

Edit: Sorry for being imprecise. I want to have the header in the middle height of the image.

It should look like this:

+----------------------+
|                      |
|                      |
|  IMAGE               | Header
|                      |
|                      |
+----------------------+

prophet1906

.vcen {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

create custom css like this
bootstrap uses float: left as default

<div class="container">
  <div class="row">
    <div class="col-md-2 vcen">
	 	<img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=150&amp;h=150">
    </div>
	<div class="col-md-4 vcen">
 		 <h2>Please align me! :)</h2>
    </div>
  </div>    
</div>

Try this out.
Hope this Helps.

Collected from the Internet

Please contact [email protected] to delete if infringement.