垂直对齐另一个 div 中的 divs，其中 3 行代码不起作用

Question

这个问题是 this answer to a similar question. I hope it is not considered a duplicate because I want to focus on the particular technique of "Vertical(ly) align(ing) anything with just 3 lines of CSS" 的后续问题，因为我无法使用该技术。

这是我的 jsfiddle：http://jsfiddle.net/hf31ofj3/ 你可能只在 HTML 5 个浏览器中看到这个问题，因为其中一个输入是颜色选择器，它的高度与其他输入字段不同，从而导致垂直错位。

无论如何，我尝试做的一件事是改变我选择元素的方式以垂直对齐，但无济于事

#basecfgattrs-row1 #width-input-container
#basecfgattrs-row1 #height-input-container
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 1

使用 `float 的垂直对齐方式通常有问题。

改用 display:inline-block...与 vertical-align:middle.

.input-col3 {
  display: inline-block;
  vertical-align: middle;
  width: 32%;
}
#basecfgattrs input {
  width: 44px;
}
#basecfgattrs-row1 {
  position: relative;
}
#basecfgattrs-row1 div {}

<div id="basecfgattrs">
  <div id="" basecfgattrs-row1 ">
  <div class="input-col3 " id="width-input-container "> 
   <label>Chart Width</label>
   <input name="width " id="width " />
  </div>
  <div class="input-col3 " id="height-input-container ">
   <label>Chart Height</label>
   <input name="height " id="height " />
  </div>
  <div class="input-col3 " id="dataSource-chart-bgColor-input-container ">
   <label>Background Color</label>
   <input name="dataSource-chart-bgColor " id="dataSource-chart-bgColor " type="color " class="colorpicker " />
  </div>
 </div>
</div>

或者您可以使用 flexbox.

#basecfgattrs-row1 {
  display: flex;
}
.input-col3 {
  display: flex;
  border: 1px solid red;
  width: 32%;
  align-items: center;
}
#basecfgattrs label {
  flex: 1;
}
#basecfgattrs input {
  flex: 0 0 44px;
  margin-right: 1em;
}

<div id="basecfgattrs">
  <div id="basecfgattrs-row1">
    <div class="input-col3" id="width-input-container">
      <label>Chart Width</label>
      <input name="width" id="width" />
    </div>
    <div class="input-col3" id="height-input-container">
      <label>Chart Height</label>
      <input name="height" id="height" />
    </div>
    <div class="input-col3" id="dataSource-chart-bgColor-input-container">
      <label>Background Color</label>
      <input name="dataSource-chart-bgColor" id="dataSource-chart-bgColor" type="color" class="colorpicker" />
    </div>
  </div>
</div>

垂直对齐另一个 div 中的 divs，其中 3 行代码不起作用

Vertically aligning divs inside another div with 3 lines of code not working

css

alignment

vertical-alignment