垂直對齊文本並在包含Div的內部浮動

Question

有一段html：-

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

錨元素是具有float: right;按鈕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;
}

小提琴演示

旁注： display: table-cell; 受IE8及更高版本的支持。