Vertical align text with floating inside Containing Div

Question

There's a piece of html:-

<div class="field-display">
    the text here
    <a class="delete">x</a>
</div>

The anchor element is button which has float: right; CSS property. The CSS for the div is:-

.field-display {
    height: 25px;
    padding: 2px 15px 2px 10px;
    vertical-align: middle;
}

But vertical-align: middle; is not working. Any Idea how to align text in middle of the div?

Answer 1

You can add display: table-cell; to your div.

.field-display {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 2px 15px 2px 10px;
    vertical-align: middle;
    display: table-cell;
}

Fiddle Demo

Side Note : display: table-cell; is supported by IE8 and above..!