translateY, vertical align content

[ttmt]

Hi all

I have a jsfiddle here - http://jsfiddle.net/0dd4gzy4/

I’m using this techique to vertical align content - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

It aligns the content but also push it out of it’s container.

Is it possible to align the content this way within it’s container.

.row{
    background: gray;
    color: white;
    min-height: 5em;
    margin: 0 0 10px 0;
}
p{
    color: red;
}
.btn{
    background: red;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

p, .btn{
  position: relative;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

[RyanReese]

Could you not just use display:table-cell and vertical-align:middle to do the vertical aligning?

[PaulOB]

@ttmt

I’m using this techique to vertical align content

That technique requires that the container has a set height otherwise it won’t work, That means for your example you would need to give the floated columns the same height in order for them to be vertically aligned.
e.g.

.col-sm-1,.col-sm-3,.col-sm-4 {height:5em}

That translate method is misleading and does nothing that we can;t do better already and with better support.

As Ryan said it would be simple with display:table and table-cell which is supported right back to IE8 unlike the translate method and will need no heights anywhere to equalize columns.

Just come out of the grid and use the display table/cell method.