css - 如何将标签与输入字段对齐

Question

我有一个场景一定很常见，但我还没有想出一个理想的解决方案。

我有以下结构 - 这是它显示的方式而不是 html 的布局方式。

<div>
    <label></label> <input></input>
    <span>this is where the validation goes</span>
</div>

我遇到的问题是标签，它有时足够长到 2 行。无论是 1 行还是 2 行，我都希望能够将其与输入元素居中。

关于解决这个问题的最佳方法的任何想法？

Answer 1

我可以想到 1 个解决方案，但我不确定这是您想要的。我将解释并举一个例子。

首先制作你的容器<div> position:relative，然后是<input> position: absolute. 那么您的top属性必须设置为 50%。

如果我们不想完全在中心，我们必须给他<input>一些高度，最后给他margin-top: -(height/2)。

div { position:relative; }
label { width: 200px; display: inline-block;  }
input { width: 200px; height: 20px; position: absolute; top: 50%; margin-top: -10px;}

之后，只需构建跨度。