这一节学习了4种通过css控制对齐的方式
1.子元素是行内元素，如：a ,span
a：水平居中：在父元素上面设置：text-align:center;
b：垂直居中，在行内元素（子元素）设置行高与父元素等高：lineheight
2.子元素是多行的内联/行内文本
a：水平居中：在父元素上面设置：text-align:center;
b：垂直居中：父元素设置：display:table-cell; vertical-align:middle;
3.子元素是块元素的时候
a：水平居中：子元素上设置左右自动：margin:auto;
b：垂直居中：父元素伤设置：display:table-cell; vertical-align:middle;
4.子元素是不定宽的块元素，最常见的就是分页导航
a：水平居中：在父元素中设置：text-align:center;
b：垂直居中：给分页的ul，加行高line-height, 等于它的父元素的行高
c：底边居中：更为常用，与多行文本处理的方式是一样的：display:table-cell; vertical-align:bottom;
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.23作业：常用的四种对齐方式</title>
<style type="text/css">
/*1.子元素是行内元素，如：a ,span*/
.dahai{
width:100px;
height:100px;
background-color:lightblue;
text-align:center; /*水平居中*/
}
.dahai a {
line-height:100px; /*垂直居中*/
}
/*2.子元素是多行的内联/行内文本*/
.box2 {
width:300px;
height:300px;
background-color:skyblue;
text-align:center; /*水平居中*/
/*垂直居中*/
display:table-cell;
vertical-align:middle;
}
/*3.子元素是块元素的时候*/
.box3{
width:200px;
height:200px;
background-color:yellow;
/*垂直居中*/
display:table-cell;
vertical-align:middle;
}
.box3 .list{
width:100px;
height:100px;
background-color:blue;
margin:auto; /*水平居中*/
}
/*4.子元素是不定宽的块元素*/
.box4 {
width:400px;
height:200px;
background-color:skyblue;
text-align:center; /*水平居中*/
/*底边居中*/
display:table-cell;
vertical-align:bottom;
}
.box4 ul{
padding:0;
/*垂直居中*/
line-height:200px;
}
.box4 ul li{
list-style:none;
display:inline;
padding-left:10px;
}
</style>
</head>
<body>
<h4>父元素一定是一个块元素，根据子元素的不同，有以下几种对齐方式</h4>
<h5>1.子元素是行内元素，如：a ,span</h5>
<div class="dahai">
<a href="">大海潮涌</a>
</div>
<hr>
<h5>2.子元素是多行的内联/行内文本</h5>
<div class="box2">
<a href=""><img src="../images/11.jpg" width="150px"></a>
<p>文章标题</p>
</div>
<hr>
<h5>3.子元素是块元素的时候</h5>
<div class="box3">
<div class="list"></div>
</div>
<hr>
<h5>4.子元素是不定宽的块元素</h5>
<div class="box4">
<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>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
