CSS vertikale Ausrichtung Puzzle mit Float rechts und variable Zeilenhöhe

Ich habe eine Tabelle, wo Zahlen nach rechts ausgerichtet sind und Texte mehr als 1 Zeile haben können.CSS vertikale Ausrichtung Puzzle mit Float rechts und variable Zeilenhöhe

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

Die vertical-align: middle nicht mit Schwimmer arbeiten: rechts, es sei denn ich die line-height gesetzt die ich nicht einstellen, da einige Texte auf mehrere Zeilen, während andere wickeln wird Ich bleibe Single Line, also kenne ich die Zeilenhöhe nicht im Voraus.

Wie richte ich die Zahl vertikal auf die Mitte des Textes aus?

EDIT Ich suche nach einer Lösung, die keine Tabellen verwendet - sie verhalten sich in zu vielen Fällen zu unterschiedlich, um für andere Elemente vollständig substituierbar zu sein.

Quelle

2015-05-21 daniel.sedlacek

Warum verwenden Sie Float anstelle einer Tabelle oder Anzeigetabelle/Tabellenzelle für tabellarische Daten (weil es wie eine Tabelle aussieht)? –

Dies ist nur ein Beispiel. CSS sollte in der Lage sein, dies zu formatieren, ohne eine Tabelle –

ich Ihren Code aktualisiert, arbeitet mit einer beliebigen Anzahl von Zeilen (ohne Tabellen) in Ordnung.

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

Quelle

2015-05-31 13:10:37 Mark

Ich habe Rand oben eingegeben: -5%; in

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

schien zu funktionieren.

Quelle

2015-05-21 13:59:02

nicht nirgendwo in der Nähe von Mitte und nicht wiederverwendbar :) –

Sie können eine Tabelle verwenden oder die divs als Tabelle verwenden.

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>

Quelle

2015-05-21 14:35:01 Selven

.row ein Flexbox Stellen. Wie folgt aus:

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

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

Edit: Mit .sum rechts ausgerichtet.

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

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

Quelle

2015-05-27 14:33:28

die * Summe * ist nicht nach rechts ausgerichtet –

Bearbeite Antwort mit _.sum_ ausgerichtet rechts –

Es tut mir leid, aber die Summe ist immer noch nicht rechts in meinem Chrom ausgerichtet –

eine andere Version hinzufügen 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; 
}

Ergebnis

enter image description here

Quelle

2015-05-30 20:45:36

Sie können es tun, indem Sie Ihre Zeile Klasse ein Flexbox machen.

.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; 
}

Quelle

2015-05-31 16:37:29

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

Hier ist meine Lösung. Es funktioniert leider nur so lange, wie Ihr .sum auf einer Zeile bleibt (oder, bleibt die gleiche Größe). Ich stelle seine Position auf absolut und 50% minus die Hälfte seiner eigenen Höhe ein, die es immer in der Mitte platziert.

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

Quelle

2015-06-01 11:04:18

Meine Lösung auf .sum und relativ auf .row absolute Positionierung verwendet.

Da Sie die Zeilenhöhe kennen, können Sie .sum um 50% des Containers und um 50% der Zeilenhöhe nach unten verschieben.

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

Die wichtigen Ergänzungen unter:

.row { 
    position: relative; 
} 

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

Quelle

2015-06-02 21:12:34 goldins

Sorry, OP, hast du gesagt, dass der Text auf der rechten oder linken Seite zu mehr Zeilen fließen kann, so dass du nicht willst Zeilenhöhe gesendet? – goldins

Daniel, ich löste diese mit Hilfe von Tags in HTML. Bitte versuchen Sie diesen Code.

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

Quelle

2015-06-03 07:31:09 Lee001

Sorry Lee Ich bin auf meinem Handy, können Sie vielleicht aktualisieren und teilen Sie die Jsbin? –

Sie können dies versuchen .... das können Sie Ihr Problem lösen ....

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

-webkit-align-Artikel: center; }

Quelle

2015-06-03 11:14:59

CSS vertikale Ausrichtung Puzzle mit Float rechts und variable Zeilenhöhe

Antwort

Verwandte Themen