Funktioniert die vertikale CSS-Eigenschaft überhaupt?

W3School sagt:Funktioniert die vertikale CSS-Eigenschaft überhaupt?

Wenn wir vertical-align:middle; Das Element ist in der der Mitte des Elements Mutter platziert

So zu tun, habe ich versucht, aber nicht Ergebnis bekam

erwünscht

Code:

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: red; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
p { 
 
    vertical-align: middle; 
 
}

<div> 
 
    text 
 
    <p> 
 
    yo bro 
 
    </p> 
 
</div>

Warum bekomme ich nicht das gewünschte Ergebnis?

Quelle

2016-04-18 Rasik

Es wirkt sich nur auf die Ausrichtung für die Inline-Elemente wie Text. Du willst flex. – SLaks

Ich habe die Eigenschaft in beiden Orten verwendet und es funktioniert nicht einmal in einem von ihnen – Rasik

Und Inline-Artikel sind vertikal ausgerichtet auf Zeilenhöhe. Also, fügen Sie 'line-height: 200px' zu Ihrem div hinzu und Sie werden sehen. – Paul

, da vertical-align nur für Inline-Level- und Tabellenzellenelemente gilt. Sowohl div als auch p sind Elemente auf Blockebene.

Gilt für Inline-Level- und Tabellenzellenelemente. Es gilt auch für ::first-letter und ::first-line.

MDN Source

, die mit im Auge und mit Ihrem Beispiel Ihre div ein table und Ihre p ein table-cell

div { 
 
    height: 200px; 
 
    width: 500px; 
 
    background: red; 
 
    text-align: center; 
 
    display: table 
 
} 
 
p { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
}

<div> 
 
    <p> 
 
    yo bro 
 
    </p> 
 
</div>

HINWEIS machen: Vertrauen Sie nicht W3Schulen a s Quelle, stattdessen verwenden oder W3C Specs

Quelle

2016-04-18 21:21:17 dippas

Hinzufügen zu div in css display: table-cell;

div { 
    display: table-cell; 
    height: 200px; 
    width: 500px; 
    background: red; 
    text-align:center; 
    vertical-align: middle; 
} 
p {}

Quelle

2016-04-18 21:24:58 AQ404

Ist "display: table-cell;" gültiges CSS? – Sparky256

@ Sparky256 ist es aber sollte ein Elternteil als Tabelle anzeigen, die in diesem Fall nicht haben. Schau dir meine Antwort an und du wirst das in Aktion sehen – dippas

@dippas. Das sehe ich jetzt. Fast hatte ein Gehirn f * art. Danke für die Klarstellung. – Sparky256

versuchen Sie es mit, line-height in Styling, wie unten dargestellt, oder Geige link

div{ 
 
    height: 200px; 
 
    width: 500px; 
 
    background: red; 
 
    text-align:center; 
 
    vertical-align: middle; 
 
} 
 
p{ 
 
    /* vertical-align: middle; */ 
 
    line-height: 100px; 
 

 
}

<div> 
 
    text 
 
    <p> 
 
    yo bro 
 
    </p> 
 
</div>

Quelle

2016-04-18 21:25:30

Hoppla, das ist eine gute Frage, ich habe es nur für eine einzige Zeile gemacht. Lass es mich klären. –

In diesem Fall müssen Sie den CSS-Code als https://jsfiddle.net/zeasts/f9ag6t5m/2/ –

@ Riot genau wie meine Antwort, die ich gepostet habe verwenden – dippas

Es gibt ein paar Probleme mit Ihrem Code geschrieben.

Erstens haben Sie nicht wirklich erklärt, was Ihr gewünschtes Ergebnis ist, so dass es schwierig ist, Ihnen bei Ihrem spezifischen Problem zu helfen.

Angenommen, Sie möchten den Absatztext mit dem anderen Text im div ausrichten, müssen Sie Ihrem Absatz display:inline-block; hinzufügen. Dann ist der Trick mit vertikaler Ausrichtung zu verwenden line-height sowie height. Setze sie beide gleich und voilá, die Dinge stehen gut nebeneinander.

div{ 
    height: 200px; 
    width: 500px; 
    line-height:200px; 
    background: red; 
    text-align:center; 
    vertical-align: middle; 
} 
p{ 
    display:inline-block; 
    padding:0; 
    margin:0; 
}

codepen here

Quelle

2016-04-18 21:31:43

Funktioniert die vertikale CSS-Eigenschaft überhaupt?

Antwort

Verwandte Themen