0
285
Views¿Cómo se alinean verticalmente los elementos principales en función de los elementos secundarios activos?
Simplemente: si tiene un div principal que contiene una lista vertical del 0 al 9, ¿cómo centra verticalmente el div con precisión en el elemento secundario activo?
Esencialmente tengo mi HTML como:
<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>y según el número que se pasa, el CSS es este:
.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; }Utilicé flexboxes donde era necesario para centrar todo, pero la principal preocupación era tratar de lograrlo. Usar 'em' para alinear verticalmente cada columna dinámicamente no está dando resultados precisos en otros dispositivos más allá del monitor de mi computadora.
1 answers
Answer question0
Una idea loca usando inline-block y float. El truco es hacer que su lista sea inline-block tenga un elemento flotante dentro. Basándonos en la alineación de línea de base predeterminada, simplemente hacemos que el elemento activo no flote para que defina la línea de base de su elemento principal:
.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>