最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

垂直置中(二)

XAMPP下载 admin 803浏览 0评论
 利用偽元素的高度,讓整體版面產生垂直置中的效果
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;
}

QQ截图20181001163350

转载请注明:XAMPP中文组官网 » 垂直置中(二)

您必须 登录 才能发表评论!