Puzzle di allineamento verticale CSS con altezza variabile e altezza riga variabile

Ho una tabella in cui i numeri sono allineati a destra e i testi possono avere più di 1 riga.Puzzle di allineamento verticale CSS con altezza variabile e altezza riga variabile

http://jsbin.com/qelosicono/1/edit?html,css,output

Il vertical-align: middle non funziona con float: right meno ho impostato la linea-altezzache non posso impostare perché alcuni testi saranno avvolgere su più linee mentre altri rimarrà single line quindi non conosco l'altezza della linea in anticipo.

Come allineare verticalmente il numero al centro del testo?

EDIT Sto cercando una soluzione che non usi le tabelle - si comportano in modo troppo diverso in troppi casi per essere completamente sostituibili con altri elementi.

fonte

2015-05-21 daniel.sedlacek

Perché si utilizza float al posto di una tabella o tabella di visualizzazione/tabella-cella per i dati tabulari (perché assomiglia a una tabella)? –

questo è solo un esempio. CSS dovrebbe essere in grado di formattare questo senza un tavolo –

ho aggiornato il codice, funziona bene con qualsiasi numero di righe (senza tabelle).

http://jsbin.com/dufesexabu/1/edit?html,css,output

fonte

2015-05-31 13:10:37 Mark

Ho inserito margine-top: -5%; in

.sum { 
    float : right; 
    vertical-align: middle; 
    line-height: 40px; 
    margin-top: -5%; 
}

che sembrava funzionare.

fonte

2015-05-21 13:59:02

non da nessuna parte vicino al mezzo e non riusabile :) –

Si potrebbe usare una tabella o fare in modo che i div si comportino come una tabella.

http://jsbin.com/bobupetefu/2/edit?html,css,output

.column { 
 
    background-color : #aaaaff; 
 
    width : 300px; 
 
    display: table; 
 
} 
 

 
.row { 
 
    border-top-color: #eeeeee; 
 
    border-top-width: 1px; 
 
    border-top-style: solid; 
 
    display: table-row; 
 
} 
 

 
.text { 
 
    padding: 10px; 
 
    width : 150px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.sum { 
 
    padding: 10px; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="column"> 
 
    <div class="row"> 
 
    <span class="text">Lorem yposum dolor sit amet</span><span class="sum">1,000,000,000</span> 
 
    </div> 
 
    <div class="row"> 
 
    <span class="text">Hello World</span><span class="sum">10,000</span> 
 
    </div> 
 
    <div class="row"> 
 
    <span class="text">Very long amount of text, Very long amount of text, Very long amount of text</span> 
 
    <span class="sum">10,000</span> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

fonte

2015-05-21 14:35:01 Selven

Fai .row un FlexBox. Come questo:

.row { 
    display: flex; 
    align-items: center; 
}

http://jsbin.com/kanucuqidu/2/edit

Edit: Con .sum allineata a destra.

Aggiungere

.text { 
    flex: 0 0 150px; 
} 
.sum { 
    flex: 1; 
}

http://jsbin.com/kanucuqidu/3/edit

fonte

2015-05-27 14:33:28

la * somma * non è allineata a destra –

Ho modificato la risposta con _sum_ allineato a destra –

Mi dispiace ma la somma è ancora non allineato a destra nel mio chrome –

un'altra versione usando css transform:

css

.row { 
    position: relative; 
    padding : 10px; 
    border-top-color: #eeeeee; 
    border-top-width: 1px; 
    border-top-style: solid; 
    vertical-align: middle; 
} 

.text { 
    width : 150px; 
    display: inline-block; 
} 

.sum { 
    position: absolute; 
    top: 50%; 
    transform: translate(0, -50%); 
    right: 10px; 
}

risultato

enter image description here

fonte

2015-05-30 20:45:36

Puoi farlo facendo la classe fila un FlexBox.

.row { 
    display: flex; 
    display: -webkit-flex; 
    -webkit-align-items: center; 
    align-items: center; 
    padding : 10px; 
    border-top-color: #eeeeee; 
    border-top-width: 1px; 
    border-top-style: solid; 
} 
.text { 
    flex: 0 0 150px; 
    display: inline-block; 
}

fonte

2015-05-31 16:37:29

http://jsbin.com/taqirojupi/2/edit

Ecco la mia soluzione. Sfortunatamente funziona solo finché il tuo .sum rimane su una riga (o rimane della stessa dimensione). Ho impostato la sua posizione in assoluto e il 50% meno la metà della sua stessa altezza, che la colloca sempre al centro.

.sum { 
 
    position:absolute; 
 
    right:10px; 
 
    top:calc(50% - 8px); 
 
}

fonte

2015-06-01 11:04:18

mia soluzione utilizza il posizionamento assoluto e relativo .sum su .row.

Poiché si conosce l'altezza della linea, è possibile spostare .sum in basso del 50% del contenitore e in aumento del 50% dell'altezza della riga.

http://jsfiddle.net/z02fgs4n/ (testato in Chrome)

Le aggiunte importanti di seguito:

.row { 
    position: relative; 
} 

.sum { 
    position: absolute; 
    right: 10px; 
    top: 50%; 
    line-height: 40px; 
    margin-top: -20px; 
}

fonte

2015-06-02 21:12:34 goldins

Mi spiace, OP, hai detto che il testo a destra o a sinistra può scorrere a più linee in modo da non voler inviato in altezza? – goldins

Daniel, ho risolto questo utilizzando i tag in HTML. Si prega di provare questo codice.

MyHTML.html:- 

    <!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    .column { 

     width : 300px; 
     display: table; 
      } 

    .row { 

     border-top-width: 1px; 
     border-top-style: solid; 
     display: table-row; 
     } 

    .text { 
     padding: 10px; 
     width : 150px; 
     display: table-cell; 
     vertical-align: middle; 
     } 

    .sum { 
     padding: 10px; 
     vertical-align: middle; 
     display: table-cell; 
     } 
</style> 
</head> 
<body> 

    <div class="column"> 
     <div class="row"> 
     <span class="text">150000000 USD  =</span><span 
         class="sum">Rs.9587972846</span> 
     </div> 
     <div class="row"> 
      <span class="text">15000000 GBP  =</span><span 
           class="sum">Rs.1471043671</span> 
     </div> 

     </div> 

     </body> 
     </html> 


    http://www.w3schools.com/css/tryit.asp?filename=trycss_align_float 

      150000000 USD = Rs.9587972846 
      15000000 GBP = Rs.1471043671

fonte

2015-06-03 07:31:09 Lee001

Scusa Lee sono sul mio telefono, puoi aggiornare e condividere il jsbin? –

Si può provare questo .... questo può aiutare a risolvere il problema ....

.row{ 
width: 220px; 
height: 50px; 
border: 1px solid black; 
display: -webkit-flex; 
display: flex; 
float:right;

-webkit-align-voci: center; }

fonte

2015-06-03 11:14:59

Puzzle di allineamento verticale CSS con altezza variabile e altezza riga variabile

risposta

Problemi correlati