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。

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者您可以使用flexbox。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: