<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.table {
/*如果不用table包裹cell则cell无法width:100%*/
display: table;
width: 100%;
}
.outer {
width: 100%;
display: table-cell;
vertical-align: middle; //使两个子元素垂直居中
height: 120px;
background: #2A3F54;
}
.inner {
float: left;
width: 120px;
display: inline-block;
background: #00aeef;
margin-right: 50px;
}
.inner2 {
height: 80px;
line-height: 80px;
background: #1764ef;
}
</style>
</head>
<body>
<div class="table">
<div class="outer">
<div class="inner">inner</div>
<div class="inner2">inner2</div>
</div>
</div>
</body>
</html>
image.png
左边元素浮动,右边元素不浮动，则可以呈现右边元素的宽度为
总宽度-(左边元素的宽度+边距)的效果,可以相对父元素垂直居中(父元素设置行高即可)，
缺点是无法让子元素vertical-align: middle;相对行垂直居中，要想让左右两个元素相对垂直居中就必须两个元素高度相等
网友评论