如何让输入字段在标签中间旁边排列？

Question

这里是我面临的问题的一个例子：
https://jsfiddle.net/v10un11s/1/

这是我的HTML：

<div> 
    <div class="component"> 
    <div> 
     <label for="test1" id="short-label">Short label: </label> 
    </div> 
    <div> 
     <input type="text" id="test1" /> 
    </div> 
    </div> 
    <div class="component"> 
    <div> 
     <label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label: </label> 
    </div> 
    <div> 
     <input type="text" id="test2" /> 
    </div> 
    </div> 
</div> 

我的CSS： 。

component > div:first-child { 
    width: 150px; 
    text-align: right; 
    margin-right: 5px; 
    margin-bottom: 10px; 
} 

.component > div { 
    display: inline-block; 
} 

这会导致输入字段排列在标签的右侧。这是我想要的，然而，它在一个非常长的标签的行尾。

我真正想要的是输入字段行右侧和标签的相对中间。

所以在上面的jsfiddle示例中，我想要输入字段排列在长标签的第三行的右侧。

我一直玩的利润率，填充，行高等等，我一直无法找出正确的解决方案。

我将不胜感激任何帮助。谢谢！

Answer 1

设置align-items: center只是CSS的一行应该做的伎俩！

.component > div { 
    display: inline-block; 
    vertical-align: middle; 
} 

请记住，这是有效的两种方式 - 所以如果您的输入比标签更高，标签将以输入为中心。

Answer 2

您可以使用Flexbox和.component

.component { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.component > div:first-child { 
 
    width: 150px; 
 
    text-align: right; 
 
}

<div> 
 
    <div class="component"> 
 
    <div> 
 
     <label for="test1" id="short-label">Short label:</label> 
 
    </div> 
 
    <div> 
 
     <input type="text" id="test1" /> 
 
    </div> 
 
    </div> 
 
    <div class="component"> 
 
    <div> 
 
     <label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label:</label> 
 
    </div> 
 
    <div> 
 
     <input type="text" id="test2" /> 
 
    </div> 
 
    </div> 
 
</div>