div内元素⽔平排列，并且垂直居中⽅法⼀：容器使⽤table布局，元素使⽤table-cell布局
.container{
display: table;
}
.item{
display: table-cell;
border: 1px green solid;
div中的div居中width: 460px;
height: 200px;
vertical-align: middle;
text-align: center;
}
⽅法⼆：每个元素都使⽤inline-block布局
display:inline-block
然后，垂直居中
// 垂直居中
.vertical-middle {
vertical-align: middle;
margin: auto 5px;
}
⽅法三：使⽤float: left
<div>
<div >aaaaaaaaaaaaaa</div>
<div >bbbbbbbbbbbbbb</div>
以上这两个div就是横向排列。
<div ></div>这个东西很重要，它清除上两个层的浮动，也就是说以下的层就继续垂直排列了。
<div>这个层就垂直排列了</div>
<div>这个层就垂直排列了</div>
</div>
⽅法四：使⽤flex布局
display: flex;
flex-direction: row;
垂直居中：
// 垂直居中
.vertical-middle {
vertical-align: middle;
margin: auto 5px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。