How do you vertically align parent elements based on active child elements?

Issue

Simply: If you have a parent div that contains a vertical list from 0 to 9, how do you vertically center the div precisely on the active child element?

I essentially have my HTML as:

<div className={`column currentValue${props.integer[0]}`}>
     <div className="number columnValue_0">
          0
     </div>
     <div className="number columnValue_1">
          1
     </div>
     <div className="number columnValue_2">
          2
     </div>
     <div className="number columnValue_3">
          3
     </div>
     <div className="number columnValue_4">
          4
     </div>
     <div className="number columnValue_5">
          5
     </div>
     <div className="number columnValue_6">
          6
     </div>
     <div className="number columnValue_7">
          7
     </div>
     <div className="number columnValue_8">
          8
     </div>
     <div className="number columnValue_9">
          9
     </div>
</div>

and based on the number being passed, the CSS is this:

.currentValue0 {
  margin-top: 24.4em;
}
.currentValue1 {
  margin-top: 21em;
}
.currentValue2 {
  margin-top: 20.1em;
}
.currentValue3 {
  margin-top: 19em;
}
.currentValue4 {
  margin-top: 15.9em;
}
.currentValue5 {
  margin-top: 17em;
}
.currentValue6 {
  margin-top: 11.6em;
}
.currentValue7 {
  margin-top: 9.5em;
}
.currentValue8 {
  margin-top: 7.4em;
}
.currentValue9 {
  margin-top: 5.2em;
}

I used flexboxes where needed to center everything but the main concern was trying to achieve this. Using ’em’ to vertically align each column dynamically isn’t giving accurate results on other devices beyond my pc monitor.

Solution

A crazy idea using inline-block and float. The trick is to make your list inline-block having float element inside. Relying on the default baseline alignment we simply make the active element non-float so it will define the baseline of its parent element:

.container {
  border:2px solid;
  padding:50px;
  text-align:center;
  background:linear-gradient(red 0 0) 0 47%/100% 1px no-repeat; /* to illustrate the basline */
}

.container .list {
  display:inline-block;
  border:1px solid;
  margin:0 10px;
  padding:2px
}
.container .list * {
  float:left;
  clear:left;
}
.container .list .active {
  float:none;
}

<div class="container">
  <div class="list">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div class="active">6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="list">
    <div>1</div>
    <div class="active">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="list">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="active">4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="list">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div class="active">7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0