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.
position: relative
to the container of columns and use % instead of em for top margins.