Vertical centering not working because row not going to 100% height

Question

I am trying to vertically center some divs in a bootstrap container that can resize due to another columns content. I want to do this without flexbox for backwards compatibility.

I am trying the translateY() trick but the parent row has 0 height so it centers itself on the top of the row instead of the middle.

I have read that floated items take the height of their children so I tried floating them but it still doesn't take the height.

How can I get this row to go 100% so the vertical centering works correctly?

    .container{
      margin-top: 60px;
    }

    .outer, .container{
      border: 1px solid #000;
    }

    .row-center{
      position: relative;
      /* This needs to be 100% height but I can't figure it out */
      /* I added the floats but it didn't help */
      height: 100%;
      float: left;
    }

    .outer{
      position: absolute;
      float: left;
      top: 50%;
      transform: translateY(-50%);
    }

    <div class="container">
      <div class="row">
        <div class="col-sm-5"><img src="http://placehold.it/350x500"></div>
        <div class="col-sm-7 row-center">
          <div class="outer">
            <div class="one">some text</div>
            <div class="two">some text</div>
          </div>
        </div>
      </div>
    </div>

(example code assumes that bootstrap css is referenced)

Code pen with bootstrap attached: http://codepen.io/GuerrillaCoder/pen/obJEgB

@Guerilla http://stackoverflow.com/questions/21357238/css-height-100-percent-not-working — Vivekraj K R, Feb 11 '16 at 07:00
Honestly, this isn't the issue. The row is taking its height from the image and not being constrained by the body or html tags. I did try this after you suggested just in case but it had no effect. — Guerrilla, Feb 11 '16 at 07:08
@Guerrilla You want set "some text" vertical center inside row? — ketan, Feb 11 '16 at 07:11
@ketan I want it to be the centre of the image to the left of it or in other words center of the height of ".row" — Guerrilla, Feb 11 '16 at 07:12

score 0 · Answer 1 · edited Feb 11 '16 at 07:39

0

Try:

.outer, .container{
    border: 1px solid #000;
    vertical-align: -webkit-baseline-middle;
    padding: 5px;
}

.row-center{
    position: relative;
    width: auto;
    height: 100%;
    float: left;
}

If this do not work then apply padding for that div.

edited Feb 11 '16 at 07:39

tmlen

8,533
5
31
84

answered Feb 11 '16 at 06:51

Priya

1,359
6
21
41

@Krish : use vertical-align: middle; :) One can use padding also. – Priya Feb 11 '16 at 06:58
try using padding.. I have edited my code. you can modify padding according to your block. – Priya Feb 11 '16 at 07:03
still doesn't work, I am not sure what you are trying to do here. The issue is the row has 0 height so centrally aligning wont work until it is 100% height. The issue is it's not taking height of child items. – Guerrilla Feb 11 '16 at 07:04
you have to define width also here. set width:auto or width:100% as per your requirement. – Priya Feb 11 '16 at 07:08
height:500px; and remove width from css in _.row-center_ – Priya Feb 11 '16 at 07:14
The whole point is I can't set manual height. If I could set the height manually then it would be easy. – Guerrilla Feb 11 '16 at 07:17
it is taking 503px height. and if want to align your text in center then apply padding to your class _One_ and _Two_ – Priya Feb 11 '16 at 07:19

score 0 · Accepted Answer · answered Feb 11 '16 at 07:16

0

Give position: unset; to .row-center and position:relative; to .row will work for you.

Working Fiddle

answered Feb 11 '16 at 07:16

ketan

19,129
42
60
98

Nice! Was it something in the bootstrap css causing issue? – Guerrilla Feb 11 '16 at 07:21
@Guerrilla No. i have already added bootstrap in fiddle. And it's working fine. – ketan Feb 11 '16 at 07:22

Vertical centering not working because row not going to 100% height

2 Answers2