CSS：如何垂直对齐“标签”和“输入”在“div”内 [英] CSS: How to align vertically a "label" and "input" inside a "div"?

问题描述

请考虑以下代码：

HTML：

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

CSS：

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

将标签（<垂直）

推荐答案

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

此方法的优点是您可以更改< c $ c> div ，更改文本字段的高度并更改字体大小，所有内容将始终保留在中间。

The advantages of this method is that you can change the height of the div, change the height of the text field and change the font size and everything will always stay in the middle.

a href =http://jsfiddle.net/53ALd/6/> http://jsfiddle.net/53ALd/6/

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

这篇关于CSS：如何垂直对齐“标签”和“输入”在“div”内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！