Wie Sie die untergeordneten Divs in einem übergeordneten div vertikal ausrichten?

Question

Also habe ich 1 Elternteil Div und 4 Kind Divs. Ich habe diese Child-Divs im Eltern-Div horizontal ausgerichtet, aber sie sind nicht vertikal ausgerichtet, es ist wie ein Graph, wie die Child-Divs platziert werden. Wie kann ich sie vertikal ausrichten?

.servicesContent { 
 
    border: solid red 2px; 
 
    font-family: arial; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
} 
 
.servicesH1 { 
 
    text-align: center; 
 
    color: #3a414e; 
 
} 
 
.servicesContent h2 { 
 
    color: #3a414e; 
 
} 
 
#h3 { 
 
    color: #3a414e; 
 
} 
 
.contentLists { 
 
    border: solid green 2px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
#lists { 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 5px; 
 
    margin: 5px; 
 
    border: 1px solid blue; 
 
    height: 190px; 
 
}

<div class="servicesContent"> 
 
    <h1 class="servicesH1">Services</h1> 
 
    <h2>Help!</h2> 
 
    <p>Child Divs are not vertically aligned</p> 
 
    <p>Help</p> 
 

 
    <div class="contentLists"> 
 
    <div id="lists"> 
 
     <h3 id="h3">first</h3> 
 
     <ul> 
 
     <li>afasasf</li> 
 
     <li>fasfsafas</li> 
 
     </ul> 
 
    </div> 
 
    <div id="lists"> 
 
     <h3 id="h3">second</h3> 
 
     <ul> 
 
     <li>gdagadg</li> 
 
     <li>agadgadg</li> 
 
     </ul> 
 
    </div> 
 
    <div id="lists"> 
 
     <h3 id="h3">third</h3> 
 
     <ul> 
 
     <li>dsfdsfs</li> 
 
     </ul> 
 
    </div> 
 
    <div id="lists"> 
 
     <h3 id="h3">fourth</h3> 
 
     <ul> 
 
     <li>dagadg</li> 
 
     <li>agadgdhtjrs</li> 
 
     <li>jjee</li> 
 
     <li>ejtejtjejejgfhdgh</li> 
 
     <li>Gtejjtejejtds</li> 
 
     </ul> 
 
    </div> 
 
    </div>

Answer 1

Versuchen

#lists { 
        display: inline-block; 
        text-align: center; 
        padding: 5px; 
        margin: 5px; 
        border: 1px solid blue; 
        height: 190px; 
      vertical-align: middle; 
       } 

Answer 2

Bitte versuchen Sie vertical-align: top; als wie unten

dieses

#lists { 
    display: inline-block; 
    text-align: center; 
    padding: 5px; 
    margin: 5px; 
    border: 1px solid blue; 
    height: 190px; 
    vertical-align: top; 
} 

Answer 3

ich die beste Art und Weise denken hinzuzufügen Elemente in der auszurichten n ew Browser ist die Verwendung von Flexbox. Mit justify-content center werden alle Elemente der contentLists horizontal ausgerichtet und mit align-items: center werden sie auch vertikal ausgerichtet. für weitere Informationen über Flexbox, überprüfen Sie bitte diese heraus: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.contentLists { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}