如何垂直对齐父div中的子div？

所以我有1个父div和4个子div。我已经在父div中水平对齐了这些子div，但是它们不是垂直对齐的，它就像子div放置的方式一样。如何垂直对齐它们？如何垂直对齐父div中的子div？

.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>

来源

2016-08-01 Sat10

顺带一提，我注意到你有冲突的ID（3X'lists'和3X'h3'）的几个要素。你会想解决这个问题。 –

试试这个

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

来源

2016-08-01 12:26:08 Friend

尽管此代码可能有助于解决问题，但提供有关_why_和/或_how_的其他上下文，回答问题将显着提高其长期值。请[编辑]你的答案，添加一些解释。 –

请不要尝试添加vertical-align: top;像下面

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

来源

2016-08-01 12:24:31 vignesh

我想对齐的元素的最佳途径ñ新浏览器是使用Flexbox。通过justify-content中心，contentLists的所有元素将水平对齐，并且使用align-items：center，它们也将垂直对齐。关于Flexbox的更多信息，请检查了这一点：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

来源

2016-08-01 12:30:26

如何垂直对齐父div中的子div？

回答

相关问题