CSS：如何在“ div”内垂直对齐“标签”和“输入”？

一尘不染

CSS：如何在“ div”内垂直对齐“标签”和“输入”？

css

考虑以下代码：

HTML:

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

CSS:

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

将label和放在（垂直）input中间的最简单方法是div什么？

阅读 251

2020-05-16

共1个答案

一尘不染

div {

    display: table-cell;

    vertical-align: middle;

    height: 50px;

    border: 1px solid red;

}


<div>

    <label for='name'>Name:</label>

    <input type='text' id='name' />

</div>

此方法的优点是您可以更改的高度div，更改文本字段的高度并更改字体大小，并且所有内容始终位于中间。

2020-05-16