-1

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
|                      |
|                      |
+----------------------+
MaxMara
  • 29
  • 2
  • 7
  • There is no CSS method of aligning elements that do not share a parent. Plus...vertically align how....at the top, middle...bottom... *what*? – Paulie_D Oct 14 '16 at 13:49
  • I thought the parent is the "row"? – MaxMara Oct 14 '16 at 13:51
  • No...the parents are the column divs which **are** aligned at the top. The image and the heading are children of their respective columns...not the row. – Paulie_D Oct 14 '16 at 13:53
  • 1
    I think you want this - http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?rq=1 – Paulie_D Oct 14 '16 at 13:55
  • Thanks @Paulie_D that's exactly the thing I was looking for. – MaxMara Oct 14 '16 at 14:12

1 Answers1

-1

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

prophet1906
  • 123
  • 7