Vertikal ausgerichtete Flex-Objekte, die nicht richtig ausgerichtet sind

Question

Ich habe einige verschachtelte Elemente, die "display: flex" haben, mit dem inneren div mit "flex-direction: column", so dass die Kind-Elemente vertikal gestapelt sind.

Wie bekomme ich es so, dass alle Inhalte in der roten, inneren div ist vertikal richtig zentriert, diese Flex-Elemente sind verschiedene HTML-Elementtypen und sie tun das nicht? Wenn Sie aus dem folgenden Beispiel sehen, ist das Leerzeichen über dem H1-Titel deutlich größer als unterhalb der unteren Ankerverknüpfung, aber das innere div hat einen Standard-Padding-Wert von 1rem auf jeder Seite und ich befolge die w3-Spezifikation.

Ich habe den Titel h1 größer gemacht, um das Problem hervorzuheben.

Codepen: https://codepen.io/emilychews/pen/VymXKY

CSS

#section-1 { 
display: flex; 
margin: 0 auto; 
width: 100%; height: 500px; 
background-color: blue; 
box-sizing: border-box;} 

#row-1 { 
display:flex; 
justify-content: center; 
margin: auto; 
padding: 1rem; 
background-color: red; 
width: 70%; 
max-width: 1043px; 
box-sizing: border-box; 
} 

#row-1 .inner { 
display: flex; 
flex-direction: column; 
justify-content: center; 
box-sizing: border-box; 
padding: 1rem; 
} 

#row-1 .inner h1, #row-1 .inner h3, #row-1 .inner p { 
color: white; text-align: center; 
} 
#row-1 .inner hr {border:0; background:white; width: 75px; height: 5px;} 
.inner h1 {font-size: 40px;} 

HTML

<section id="section-1"> 
    <div id="row-1"> 
    <div class="inner" > 
     <h1>SOME WORDS TO MAKE A TITLE</h1> 
     <h3>My subheading. Your subheading.</h3> 
     <p>A random sentance about something or other.<br /> 
     Another random sentance about something or other.</p> 
     <hr> 
     <p><a href="#">LEARN MORE</a></p> 
    </div> 
    </div> 
</section> 

Answer 1

Elemente wie h1, p und hr hat Pannen vorgegeben, und da sie nicht gleich sind, erhalten Sie die Ergebnis beschrieben/gezeigt.

Geben Sie ihnen alle einen gleichen oberen/unteren Rand, z.

.inner > * { 
    margin: 10px auto; 
} 

Stapel Snippet

#section-1 { 
 
    display: flex; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    box-sizing: border-box; 
 
} 
 

 
#row-1 { 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: auto; 
 
    padding: 1rem; 
 
    background-color: red; 
 
    width: 70%; 
 
    max-width: 1043px; 
 
    box-sizing: border-box; 
 
} 
 

 
#row-1 .inner { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    box-sizing: border-box; 
 
    padding: 1rem; 
 
} 
 

 
#row-1 .inner h1 { 
 
    color: white; 
 
    text-align: center; 
 
    margin-top: 0; 
 
    padding: 0; 
 
} 
 

 
#row-1 .inner h3 { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
#row-1 .inner p { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
#row-1 .inner p a { 
 
    color: white; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding; 
 
    0; 
 
} 
 

 
#row-1 .inner hr { 
 
    border: 0; 
 
    background: white; 
 
    width: 75px; 
 
    height: 5px; 
 
} 
 

 
.inner h1 { 
 
    font-size: 40px; 
 
} 
 

 
.inner > * { 
 
    margin: 10px auto;     /* added */ 
 
}

<section id="section-1"> 
 
    <div id="row-1"> 
 
    <div class="inner"> 
 
     <h1>SOME WORDS TO MAKE A TITLE</h1> 
 
     <h3>My subheading. Your subheading.</h3> 
 
     <p>A random sentance about something or other.<br /> Another random sentance about something or other.</p> 
 
     <hr> 
 
     <p id="lowerlink"><a href="#">LEARN MORE</a></p> 
 
    </div> 
 
    </div> 
 
</section>