Vertikale Ausrichtung funktioniert nicht auf Inline-Block

Mir wurde gesagt, dass:Vertikale Ausrichtung funktioniert nicht auf Inline-Block

Vertikal ausrichten nur für Inline arbeitet, Inline-Blöcke, Bilder und Tabelle Elemente.
Sie muss auf das untergeordnete Element angewendet werden, wie das übergeordnete Element , im Gegensatz zu text-align.

Wenn ich jedoch versuchte, vertikale Ausrichtung auf einem Inline-Block-Element zu setzen, funktionierte es nicht. Warum?

#wrapper { 
 
border: 1px solid black; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#content { 
 
border: 1px solid black; 
 
display: inline-block; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'content'> content </div> 
 
</div>

Quelle

2016-02-20 frosty

@Oriol bedeutete, dass ich Mitte. Und bevor Sie fragen, ja, Mitte ist ein gültiger Wert. http://www.w3schools.com/cssref/pr_pos_vertical-align.asp Und was meinst du mit Line-Box? – frosty

@Oriol Ich bin auch nicht auf der Suche nach einer anderen Möglichkeit, dies zu tun. Ich suche nur nach einer Erklärung, warum das nicht funktioniert, also bitte die doppelte Markierung entfernen. – frosty

@Oriol Wenn ich das richtig verstehe, beziehst du dich auf #content als die Zeilenbox? Weil es hier nur 2 Elemente gibt, #wrapper und #content. – frosty

es nicht funktioniert weil vertical-align die Ausrichtung von Inline-Level-Inhalt in Bezug auf ihre Zeile Box, nicht ihre enthaltenen Block:

Diese Eigenschaft beeinflusst die vertikale Positionierung innerhalb einer Linienbox von die Boxen, die von einem Inline-Level-Element erzeugt werden.

A line box ist

Der rechteckige Bereich, der die Schachteln enthält, die eine Linie

bilden, wenn Sie einen Text zu sehen, die mehrere Leitungen aufweisen, die jeweils ein Zeilenfeld ist. Zum Beispiel, wenn Sie

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

haben, wenn es nur eine einzige Zeile, wie in Ihrem Fall ist, es ist auch ein Zeilenbox

Mit vertical-align: middle Zentren .content verti innerhalb dieser Zeilenbox. Das Problem ist jedoch, dass die Zeilenbox nicht vertikal im umgebenden Block zentriert ist.

Wenn Sie vertikal etwas zum Zentrum in der Mitte des umschließenden Blocks sehen How to align text vertically center in div with CSS?

Quelle

2016-02-21 02:21:39 Oriol

daher, wenn es ein garantierter einzeiliger Inhaltstext ist und die Zeilenhöhe dieselbe Länge wie die Höhe des Containers hat, befindet sich der Inhaltstext in der Mitte des Containers. zB: '#content {line-height: 500px}' https://jsfiddle.net/28ng9ovs/ –

@AizzatSuhardi Ja, und Sie können 'white-space: nowrap' verwenden, um Zeilenumbrüche zu vermeiden. – Oriol

Vertical-align auf Inline/Inline-Block-Elemente, Bilder, Text ... auszurichten zusammen Element, nicht mit Elternteil.

Anwendungsbeispiel: in einem Text Smiley Bild ausrichten

Sie durch Hinzufügen einer 0px Breite betrügen kann, 100% Höhe Pseudoelement

#wrapper { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    vertical-align: middle; 
 
} 
 
#wrapper:after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
#content { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
    <div id = 'content'> content </div> 
 
</div>

Quelle

2016-02-21 02:17:59

Es ist für mich arbeiten, indem sie mit vertical-align: text-top;

<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 

.box { 
    display: inline-block; 
    width: 20%; 
    margin: 5px; 
    padding:10px; 
    border-top: 5px solid #000000; 
    vertical-align: text-top; 
}

jsfiddle

Quelle

2017-02-21 17:58:03 fede

Vertikale Ausrichtung funktioniert nicht auf Inline-Block

Antwort

Verwandte Themen