CSS:如何在“div”内垂直对齐“label”和“input”?

前端之家收集整理的这篇文章主要介绍了CSS:如何在“div”内垂直对齐“label”和“input”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
考虑 following code

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS:

div {
    height: 50px;
    border: 1px solid blue;
}

标签和输入放在div(垂直)的中间是最简单的方法

解决方法

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

方法的优点是,您可以更改div的高度,更改文本字段的高度和更改字体大小,一切都将始终保持在中间。

http://jsfiddle.net/53ALd/6/

原文链接:https://www.f2er.com/css/222848.html

猜你在找的CSS相关文章