0

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?

This image will help visualize

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.

2
  • Try to apply position: relative to the container of columns and use % instead of em for top margins. Sep 21, 2021 at 19:13
  • This is going to be way easier if you only try and change the margin on the column, and all the elements within the column have a set height. You measure the height offset of the element you care about from the top of its column, and apply that height offset to the parent column. So for instance, if each number has a vertical spacing of 10px, and you want 5 to be centered, you shift the entire column up 55px (the extra 5px is added to center the element). You do that for each of the columns.
    – Robin
    Sep 21, 2021 at 19:14

1 Answer 1

2

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>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.