实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月23日作业-css对齐</title>
<style type="text/css">
/*1、子元素是行内元素的对齐*/
.n1{
width: 200px;
height: 200px;
background-color: lightblue;
/*a.水平居中：在父元素中设置text-align：*/
text-align: center;
}
.n1 a {
/*b.垂直居中：在子元素中设置行高，与父元素等高。*/
line-height: 200px;
}
/*2、子元素是多行的内联元素的对齐*/
.n2{
width: 200px;
height: 200px;
background-color: lightpink;
/*a.多行内联元素水平居中，在父元素中设置text-align属性：*/
text-align: center;
/*b.多行内联元素的垂直居中，先在父元素中设置display:table-cell; 然后再设置vertecla-align:middle;即可。*/
display: table-cell;
vertical-align: middle;
}
/*3、子元素是块元素的对齐：*/
.n3{
width: 200px;
height: 200px;
background-color: lightgreen;
/*a.子元素是块元素的水平居中：在子元素中设置margin:auto（左右自动）；即可。
b.垂直居中：在父元素中先设置display:table-cell;再设置vertical-align:middle;即可。*/
/*margin: auto;*/
display:table-cell;
vertical-align: middle;
}
.n3-div{
width: 150px;
height: 150px;
background-color: lightyellow;
margin: auto;
}
/*
4.子元素是不定宽的块元素的对齐：
a.水平居中：在父元素设置text-align:center;
b.垂直居中：给分页的ul加行高并与父级等高。
c.底边居中：这种方式更常用。与多行文本及子元素是块元素的垂直居中一样，父元素设置display:table-cell;然后设置vertical-align:middle;
*/
.n4{
width: 200px;
height: 200px;
border: 1px solid red;
/*将li转为行内元素后，设置text-align:center;*/
text-align: center;
/*沿底边居中：*/
display: table-cell;
vertical-align: bottom;
}
.n4 ul{
margin: 0;
padding: 0;
/*line-height: 200px; 垂直居中设置与父元素等行高，但分页设置一般都是设置沿底边居中。*/
}
.n4 li{
display: inline;
}
</style>
</head>
<body>
<!-- 子元素是行内元素的对齐 -->
<div class="n1">
<a href="">我是行内元素a</a>
</div>
<hr>
<!-- 子元素是多行的内联元素时的对齐 -->
<div class="n2">
<span>PHP中文网</span><br>
<a href="www.php.cn">www.php.cn</a>
</div>
<hr>
<!-- 子元素是块元素的对齐： -->
<div class="n3">
<div class="n3-div"></div>
</div>
<hr>
<!-- 子元素是不定宽的块元素的对齐，最常见的就是分页导航。 -->
<div class="n4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写：
