一、左右布局
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
1. float+margin-left实现
.wrapper{
content: "";
display: block;
clear: both;
}
.left{
background-color: yellow;
width: 100px;
height: 300px;
float: left;
}
.right{
background-color: green;
margin-left:120px;
height:400px;
2. position+margin-left实现
.wrapper{
position: relative;
}
.left{
width:100px;
height:300px;
background-color: yellow;
position: absolute;
}
.right{
height: 500px;
background-color: green;
margin-left: 120px;
}
3. flex实现
.wrapper{
display: flex;
}
.left{
background-color: yellow;
width: 200px;
height: 500px;
}
.right{
background-color: green;
flex: 1;
}
二、左中右布局
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
1. position+margin实现
.wrapper{
position: relative;
}
.left{
height: 400px;
width: 100px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
.right{
height: 400px;
width: 100px;
background-color: yellow;
position: absolute;
top: 0;
right: 0;
}
.main{
height: 500px;
background-color: green;
margin-left: 110px;
margin-right: 110px;
}
2. float+margin实现
.warpper{
content:"";
display: block;
clear: both;
}
.left{
float: left;
width: 100px;
height: 400px;
background-color: yellow;
}
.right{
float: right;
width: 100px;
height: 400px;
background-color: yellow;
}
.main{
background-color: green;
height: 400px;
margin-left: 110px;
margin-right: 110px;
}
三、水平居中
1. inline 或 inline-* （像链接、文本）元素水平居中
可以在其display为block的父元素上加上text-align: center;属性
<style>
.parent{
text-align: center;
}
.child{
display: inline-block;
border: 1px solid red
}
</style>
<div class="parent">
这是居中的
<div class="child">你好</div>
<span>你的名字</span>
<a href="#">百度一下</a>
</div>
2. block元素
在该元素上加margin: 0 auto;属性
<style>
.center-me{
margin: 0 auto;
background-color: pink;
width: 100px;
}
</style>
<div class="center-me">你的名字</div>
3. 多个块元素水平居中
将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:
.parent {
text-align:center;
}
4.多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:
.parent {
display:flex;
justify-content:center;
}
四、垂直居中
1. 单行的行内元素解决方案
.parent {
background: #222;
height: 200px;
}
/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a {
height: 200px;
line-height:200px;
color: #FFF;
}
2. 多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：
.parent {
background: #222;
width: 300px;
height: 300px;
/* 以下属性垂直居中 */
display: table-cell;
vertical-align:middle;
}
3. 已知高度的块状元素解决方案
.item{
top: 50%;
margin-top: -50px; /* margin-top值为自身高度的一半 */
position: absolute;
padding:0;
}
网友评论