Center content (text) of a bootstrap col vertically

Question

I've seen over 10 stackoverflow questions and their answers, none have worked so far.

I have text inside a bootstrap col, but it just sits at the top of the col. I need it to be centered, preferably centered in relation to the image.

I was using the media object, but it did not look good for smaller devices.

This is what I have:

<div class="container">
  <div class="row">
     <div class="col-md-5">
        ...img stuff..
     </div>

     <div class="col-md-7 left-padding-30" style="height: 500px; border : 1px solid red;">
        <h2 class="featurette-heading">
           This First Heading
           <span class="text-muted">Will Catch Your Eye</span>
        </h2>
        <p class="lead">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. </p>
     </div>
  </div>

Output: enter image description here

jsfiddle: http://jsfiddle.net/9btr6zon/

I've set the height manually to 500px to try aligning the content. Is there any way I can remove it while still centering the content for bigger screens?

Extra question, the image is using img-circle and img-resposive, yet it's not resizing for smaller screens, can I fix this?

Edit: As a "placeholder" solution, I set the padding-top of the col to around 150px.

You want the image to vertically center with content or something?? — AndrewL64, Mar 11 '15 at 19:47
I clarified it. I need the text that is inside the div to be vertically centered in relation the the col it is inserted in. Currently it is sitting at the top of the col. — hfingler, Mar 11 '15 at 20:02
jsfiddle here: http://jsfiddle.net/9btr6zon/ I removed part of the text to reproduce what I get, large image, short text. — hfingler, Mar 11 '15 at 20:33

aahhaa · Answer 1 · 2015-03-11T19:55:36.490

0

I don't know about bootstrap but you can just inline it, and use vertical align to get the desired effect.

.circle {
    border-radius: 50%;
 width: 100px;
 height: 100px;
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
}
.para {
    display:inline-block;
    vertical-align:middle;
}
h1,p {padding:0; margin:0;}

<div class="circle">
  <img src="http://placekitten.com/g/200/300">
</div>
<div class="para">
  <h1>HELP ME MAMA</h1>
  <p>The british are coming</p>
</div>

edited Mar 11 '15 at 19:55

answered Mar 11 '15 at 19:40

aahhaa

2,240
3
19
30

Didn't work for me, the image is on top of the text. – hfingler Mar 11 '15 at 20:00
haha, i never use bootstrap myself but I have use similar framework. go to bootstrap's documentation you need something thing like .col-xs-12 or .col-sm-12. – aahhaa Mar 11 '15 at 20:03
`/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }` you are using md, it will apply that to any screen size 992 and up aka not mobile... so look in to that and good luck. – aahhaa Mar 11 '15 at 20:05
http://jsfiddle.net/vqc4ob4s/1/ ... I override flow, but I don't know how that will affect the rest of layout. – aahhaa Mar 11 '15 at 20:15
I edited my question, if the text is much shorter, it doesn't get centered vertically. – hfingler Mar 11 '15 at 20:34

score 0 · Answer 2 · answered Mar 11 '15 at 21:15

Alright, I lost my patience and ended up centering it by using padding. But since it looked very ugly on smaller devices I ended up using a variable padding:

@media (max-width:768px) {
  .var-padding {
    padding-top: 0px;
  }
}

@media (max-width:992px) {
 .var-padding {
    padding-top: 10px;
  }
}

@media (min-width:993px) {
  .var-padding {
    padding-top: 100px;
  }
}

score 0 · Answer 3 · answered Mar 11 '15 at 22:22

With a little bit of display: flex;, you can vertically align your text with respect to it's div :) Here is a jsfiddle: http://jsfiddle.net/AndrewL32/9btr6zon/2/

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

P.s. I used a specific height in this jsfiddle but you can change and specify a percentage height or something according to your need later.

Center content (text) of a bootstrap col vertically

3 Answers3

Linked