所以我有1个父div和4个子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>
&#13;
答案 0 :(得分:1)
试试这个
var value="<div >
<p class="">Hi cname@gmail.com</p>
<br/>
<br/>
<br/>
<div id="myDiv">
sgdhsagdhagh
dhsajdgasj
cjzjcg
</div>
</div>"
答案 1 :(得分:0)
请尝试添加vertical-align: top;
,如下所示
#lists {
display: inline-block;
text-align: center;
padding: 5px;
margin: 5px;
border: 1px solid blue;
height: 190px;
vertical-align: top;
}
答案 2 :(得分:0)
我认为在新浏览器中对齐元素的最佳方法是使用Flexbox。使用对齐内容中心,contentLists的所有元素将水平对齐并与对齐项目:中心它们也将垂直对齐。有关Flexbox的更多信息,请查看:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.contentLists {
display: flex;
justify-content: center;
align-items: center;
}