css - 垂直对齐另一个 div 内的 div，3 行代码不起作用

Question

此问题是 this answer to a similar question 的后续问题.我希望它不被认为是重复的，因为我想专注于 "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>