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

垂直置中(三)

XAMPP下载 admin 872浏览 0评论
 利用 css 動態計算的能力,抓出高度的距離。可以保留 div block 的特性,不用修改成 inline-block
html

<div id=”a”>
<div id=”b”></div>
<div id=”c”></div>
<div id=”d”></div>
</div>
css

#a{
margin: 0 auto;
width:200px;
height:150px;
border:1px solid #000;
}

#b{
width:30px;
height:40px;
background:green;
float:left;
margin-top:calc(50% – 40px);
margin-left:calc(50% – 45px);
}

#c{
width:30px;
height:80px;
background:red;
float:left;
margin-top:calc(50% – 60px);
}

#d{
width:30px;
height:40px;
background:blue;
float:left;
margin-top:calc(50% – 40px);
}

QQ截图20181001164420

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

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