垂直对齐文本与浮动内部包含Div

Question

有一段HTML： -

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

anchor元素是具有float: right; CSS属性的按钮。 div的CSS是： -

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

但vertical-align: middle;无效。任何想法如何在div的中间对齐文本？

Answer 1

您可以将display: table-cell;添加到您的div。

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

<强> Fiddle Demo

旁注： display: table-cell;受IE8及以上版本支持..！