css - 垂直对齐输入与标签

Question

我希望我所有的输入(image)在同一条垂直线上对齐。

垂直对齐 css 属性不起作用，我发现的 sass mixin 也不起作用(见下文)。

@mixin vertical-align($pos) {
    position: $pos;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

有什么简单的方法吗？我现在已经挣扎了四个半小时了……

A fiddle包括 css 和 html

Answer 1

vertical-align 属性沿水平线垂直对齐元素。我猜您希望所有输入都从水平线上的同一位置开始，从而创建一种双列网格。

这可以通过以下方式实现:

label {
  display: inline-block;
  width: 5em;
}