vertical-align: middle doesn't work

Question

The css property vertical-align: middle does not work in this example.

HTML:

  Two line text&l         


        
      

Answer 1

You must wrap your element in a table-cell, within a table using display.

Like this:

  Two line text
  Float right

and

.float {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}
.twoline {
    width: 50px;
    display: table-cell;
}
div {
    display: table;
    border: solid 1px blue;
    width: 500px;
    height: 100px;
}

Shown here: http://jsfiddle.net/e8ESb/7/