利用偽元素的高度,讓整體版面產生垂直置中的效果
html
html
<div id=”a”>
<div id=”b”></div>
<div id=”c”></div>
<div id=”d”></div>
</div>
css
#a{
margin: 0 auto;
width:300px;
height:150px;
border:1px solid #000;
text-align:center;
}
#b{
width:30px;
height:40px;
background:green;
display:inline-block;
vertical-align:middle;
}
#c{
width:30px;
height:60px;
background:red;
display:inline-block;
vertical-align:middle;
}
#d{
width:30px;
height:40px;
background:blue;
display:inline-block;
vertical-align:middle;
}
#a::before{
content:”;
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;
}
转载请注明:XAMPP中文组官网 » 垂直置中(二)