Vertical centering does not work because the line does not reach 100% of the height

Question

I am trying to vertically center some divs in the bootstrap container, which may resize due to different column contents. I want to do this without flexbox for backward compatibility.

I am trying to do the translateY () trick, but the parent line is 0 in height, so it is centered at the top of the line, not the middle.

I read that floating elements occupy the height of their children, so I tried to swim them, but it still does not occupy height.

How can I make this line go 100% so that 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>

Run codeHide result

(sample code assumes css download link is linking)

: http://codepen.io/GuerrillaCoder/pen/obJEgB

Answer 1

position: unset; .row-center position:relative; .row .

Answer 2

Try:

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

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

, padding div.