代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>对齐</title>
<style type="text/css">
.box{
width:300px;
height: 200px;
background-color:skyblue;
/* 元素水平居中 */
text-align:center;
}
.box span{
/*子元素设置行高与父元素高度相同*/
line-height:200px;
}
.box1{
width:300px;
height: 200px;
background-color:#6623;
text-align:center;
display: table-cell;
vertical-align:middle;
}
.box2{
width:600px;
height:200px;
background-color:lightgreen;
text-align:center;
display:table-cell;
vertical-align:bottom;
}
.box2 ul{
margin: 0;
padding: 0;
}
.box2 li{
list-style:none;
display:inline;
}
.box3{
width:300px;
height:200px;
background-color:red;
/* text-align:center; */
display:table-cell;
vertical-align:middle;
}
.box3child{
width:150px;
height:100px;
margin:auto;
background-color:yellow;
}
</style>
</head>
<body>
<div>
<span>文本居中</span>
</div><hr />
<div>
<a href="" title="">多行文本居中</a><br>
这里是显示的下一行
</div><hr>
<div>
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
</ul>
</div><hr>
<div>我是大盒子
<div>我是小盒子</div>
</div>
</body>
</html>手写代码：
