Vertikale Zentrierung eines Blockkopfes

Question

Ich habe eine einfache Flex-basierte Tabelle erstellt.

section { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    margin: 0; 
 
    background-color: green; 
 
} 
 

 
h2, ul { 
 
    width: 50%; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
} 
 

 
h2 { 
 
    text-align: right; 
 
    vertical-align: middle; 
 
} 
 
    
 
h2 { 
 
    background-color: blue; 
 
} 
 

 
ul { 
 
    background-color: yellow; 
 
}

<section> 
 
    <h2>Heading</h2> 
 

 
    <ul> 
 
    <li>foo</li> 
 
    <li>bar</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    </ul> 
 
</section>

Zunächst einmal, im Gegensatz zu dem, was in meinem lokalen Projekt angezeigt wird, die h2 und ul Kinder nehmen Sie nicht 100% der Höhe des Abschnitts in dem Schnipsel. Warum?

Das Hauptproblem: Ich möchte die h2 Block die section und seinen Text vertikal zentriert füllen. Mein Ziel ist es, die background-color der linken und rechten Zelle separat zu ändern. Ich setze die vertical-align Option, aber es funktioniert nicht. Warum?

Answer 1

Um dies zu tun, müssen Sie display: flex auf h2 verwenden und dann align-items: center und justify-content: flex-end, wenn Sie mit der rechten Text ausrichten möchten. Außerdem können Sie Ränder entfernen, um Objekte auf die gleiche Höhe zu bringen.

section { 
 
    display: flex; 
 
    margin: 0; 
 
    background-color: green; 
 
} 
 
h2, 
 
ul { 
 
    flex: 1; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
    margin: 0; 
 
} 
 
h2 { 
 
    background-color: blue; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    color: white; 
 
} 
 
ul { 
 
    background-color: yellow; 
 
}

<section> 
 
    <h2>Heading</h2> 
 

 
    <ul> 
 
    <li>foo</li> 
 
    <li>bar</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    </ul> 
 
</section>

Answer 2

Flex-align (-Items, -tafeln) für vertikalen align

section { 
 
    align-items: center; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    margin: 0; 
 
    background-color: green; 
 
} 
 

 
h2, ul { 
 
    width: 50%; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
} 
 

 
h2 { 
 
    text-align: right; 
 
    align-self: center; 
 
} 
 
    
 
h2 { 
 
    background-color: blue; 
 
} 
 

 
ul { 
 
    background-color: yellow; 
 
}

<section> 
 
    <h2>Heading</h2> 
 

 
    <ul> 
 
    <li>foo</li> 
 
    <li>bar</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    <li>baz</li> 
 
    </ul> 
 
</section>

Answer 3

Notwendigkeit Linienhöhe definieren

line-height: 100 Pixel; oder was auch immer in Sie in h2 brauchen