Struggling to vertically align divs within a parent div despite only using 3 lines of code

Question

Struggling to vertically align divs within a parent div despite only using 3 lines of code

This question builds upon an answer provided in response to a similar query. It aims to explore the specific technique outlined in "Vertical(ly) align(ing) anything with just 3 lines of CSS", especially since I'm encountering difficulties making it work.

Here's the jsfiddle link: http://jsfiddle.net/hf31ofj3/ The issue may only be visible in HTML5 browsers due to one input being a color picker, which differs in height from other input fields and causes vertical misalignment.

One approach I've attempted involves modifying the selection of elements for vertical alignment, though so far it has not yielded the desired results:

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

css alignment vertical-alignment

Answer 1

Answer №1

When it comes to vertical alignment, using `float` can often be problematic.

Instead, consider using display:inline-block 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>

Alternatively, you could utilize 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>

Answer 2

When it comes to vertical alignment, using `float` can often be problematic.

Instead, consider using display:inline-block 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>

Alternatively, you could utilize 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>

Struggling to vertically align divs within a parent div despite only using 3 lines of code

Answer №1

Similar questions

Ways to prevent blank class from occupying space until filled with Javascript

The linking process in AngularJS is encountering difficulties when trying to interact with

Footer remains fixed and scrolls into the body when the window is resized

`CSS alignment problems with multiple images`

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

Removing the css class when an element loses focus

Having trouble with my custom dropdown selector conflicting with Bootstrap 4 CSS

How can you turn off CSS3 animations for browsers that don't support them

Aligning the Bootstrap 5 Accordion Button in the Center and Adding Line Breaks

pressing the button again will yield a new outcome

Positioning elements in CSS with a rolling ball animation

"Enhance Your Website with Slider Swipe Effects using CSS3 and

Tips for updating the color scheme in your CSS file by making hue adjustments to all colors

How to align scrolling images with their scroll origin - a step by step guide

The jQuery keyup filter is functioning properly when the content is displayed in columns, but it is not working as expected when the

Image in Bootstrap not showing up on smaller devices

The responsiveness of Bootstrap 5 columns in Chrome inspection appears to break after reaching medium size, yet functions properly in other areas

What could be causing the disappearance of the border around this `<li>` element?

Eliminating the Scrollbar from Bootstrap 4 DataTable Causes Table Width to Decrease

Tips on concealing the scrollbar only when a particular element is visible