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

Question

This question is a follow-up to 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", and because I cannot get the technique to work.

Here is my jsfiddle: http://jsfiddle.net/hf31ofj3/ you may only see the issue in HTML 5 browsers because one of the inputs is a color picker, which is a different height than the other input fields, thus causing the vertical mis-alignment.

In any case one thing I've tried to do is change how I am selecting the elements to vertically align as follows, but to no avail

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

Paulie_D · Accepted Answer · 2015-08-20T20:04:22.587

Vertical alignment using `float is often problematical.

Use display:inline-block instead...with 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>

Or you could use 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>

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

1 Answers1