Vertikales Ausrichtungseigenschaftsausrichtungselement

Die Spezifikation erwähnt, dass die vertikale Anzeigeeigenschaft (die nur für Inline- und Inline-Blockelemente gilt) das Element selbst, aber nicht seinen Inhalt ausrichtet. Eine Spanne, wie ich es verstehe, ist das Element. In dieser Geige funktioniert alles wie erwartet, müsste aber gemacht werden, um den eigentlichen Text "Beta" in der Spanne zu zentrieren?Vertikales Ausrichtungseigenschaftsausrichtungselement

https://jsfiddle.net/69uhamv5/

.b{ 
    display:inline-block; 
    background-color:red; 
    height:120px; 
    vertical-align:middle; 
} 

<span class="b">Beta</span>

P. S: Ich bin nicht für eine schnelle Lösung suchen, ich bin mir bewusst, i Zeilenhöhe oder Anzeigetabelle oder eine Handvoll anderer Dinge verwenden kann. Ich interessiere mich mehr dafür, genau herauszufinden, warum das nicht funktioniert, oder vielmehr, warum es das Span-Element, aber nicht den Text darin anvisiert und was ich tun muss, um den Text darin anzusprechen.

Quelle

2017-10-08 George Avgoustis

Schnell Lösung ist 'line-height: 120px;' –

'vertical-align: middle;' nicht arbeiten 'Anzeige: Inline-Block' beste Lösung ist oben Kommentar. – Pedram

Eigenschaft vertical-align funktioniert auch für display: table-cell. .., diese Eigenschaft ist verwandt mit den Geschwistern des Elements. Wenn Sie den Text löschen möchten, warum richten Sie dann nicht die Spanne aus, als für den Text zu gehen? –

Also, Sie somme Lösung haben:

Variante 1 add line-height

.b{ 
    background-color:red; 
    display: inline-block; 
    height:120px; 
    line-height: 7.5em; 
}

try hier: https://jsfiddle.net/69uhamv5/6/

Variante 2 Zentrum mit Tisch

.b, span { 
    display: table-cell; 
    vertical-align:middle; 
} 
.b { 
    background-color:red; 
    height:120px; 
    } 

body{ 
    display: table; 
    height:300px; 
    } 
}

hier versuchen https://jsfiddle.net/69uhamv5/5/

Quelle

2017-10-08 12:39:15

Variante 1 scheint zu arbeiten, aber würde man tun, wenn die Höhe des enthaltenen Elements nicht statisch, sondern ein Prozentsatz wäre? Zeilenhöhe verwendet nicht einen Prozentsatz richtig? (Und selbst wenn es tat, würde ich annehmen, dass es sich auf die Breite als Prozentsätze beziehen würde, die viele Male tun) –

Ja, Linienhöhe verwendet nicht einen Prozentsatz. Und center with line-height ist eine Lösung nur für einen statischen Block und nur für eine Zeile. Vielleicht möchten Sie eine flexible Höhe sagen, nicht Prozent. Für flexible Höhe Variante 2 muss gut funktionieren. Auch mit mehreren Zeilen. –

Hier ist mein Ansatz:

.b{ 
 

 
    background-color:red; 
 
    height:120px; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    
 
} 
 

 
body{ 
 
    height:300px; 
 
    
 
    } 
 
}

<body> 
 
    <span >Alpha</span><span class="b">Beta</span><span>Gamma</span> 
 
    <script src="js/scripts.js"></script> 
 
</body>

Quelle

2017-10-08 12:26:56

flex ist eine css3-Eigenschaft., So kann es Kompatibilitätsprobleme auf älteren Browsern haben –

Vertikales Ausrichtungseigenschaftsausrichtungselement

Antwort

Verwandte Themen