text-align:center
相当于TextView中的gravity=”center-horizontal”,当前标签内容水平居中。
vertical_align:middle
垂直居中,使用是有条件的:
1、display:inline-block;
2、line-height:200px /行高为当前标签的高度/
padding-bottom
app中常常用到weight权重来布局适配手机,同样,在html中,我们同样可以相似的使用padding-bottom来做,当padding-bottom取值%时,看文档有“% 定义基于父元素宽度的百分比下内边距。”的说明。
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.parent {
width: 50%;
padding-bottom: 20%;
margin-left: 25%;
float: left;
background-color: #cccccc;
padding: 10px;
}
.box1 {
width: 50%;
padding-bottom: 20%;
float: left;
background: #897642;
}
.box2 {
width: 50%;
padding-bottom: 10%;
float: right;
background: #1E8977;
}
.box3 {
width: 50%;
padding-bottom: 10%;
float: right;
background: #6B2590;
}
</style>
------------------------------------------------
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
效果如下