css控制元素的对齐方式技巧
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css控制元素的对齐方式</title>
<style type="text/css">
#happy{
width: 200px;
height: 200px;
background-color: skyblue;
text-align: center;/*使行内元素在块元素中水平居中*/
}
#happy a{
line-height: 200px;/*使行内元素在块元素中垂直居中*/
}
#happy1{
width: 200px;
height: 200px;
background-color: lightgreen;
text-align: center;
/*以下二行声明可以使多个行内元素在块元素中垂直居中*/
display: table-cell;/*将当前块显示方式改为表格单元格方式*/
vertical-align: middle;/*设置单元格内的元素垂直居中*/
}
.happy2{
width: 200px;
height: 200px;
background-color: blue;
display: table-cell;
vertical-align: middle;
}
.happy2 .good{
width: 100px;
height: 100px;
background-color: red;
margin:auto;/*auto指浏览器自动计算*/
/*margin-right: auto;*/
/*margin-left: auto;*/
}
#happy3{
width: 200px;
height: 200px;
background-color: green;
text-align: center;
display: table-cell;
/*vertical-align: middle;*/
vertical-align: bottom;/*底边居中*/
}
#happy3 ul{
padding: 0;
/*line-height: 200px;*/
}
#happy3 li{
list-style: none;
display: inline;
}
</style>
</head>
<body>
<h3>父元素一定是个块元素，根据子元素的不同，有以下几种对齐方式</h3>
1.子元素是行内元素，如 a span <br>
a、水平居中:在父元素上设置：text-align:center <br>
b、垂直居中:在行内元素（子元素）设置行高与父元素等高：line-height <br>
<div id="happy">
<a href="">加油加油！！！</a>
</div>
<hr>
2.子元素是多行的内联/行内文本
a、水平居中:在父元素上设置：text-align:center <br>
b、垂直居中：在父元素上设置 display:table-cell; vertical-align:middle;
<div id="happy1">
<a href="">继续加油！！！</a><br>
<span>www.jiayou.com</span>
</div>
<hr>
3.子元素是块元素，如：p <br>
a、水平居中: 子元素上设置左右自动：margin：auto；
b、垂直居中：在父元素上设置 display:table-cell; vertical-align:middle;
<div class="happy2">
<div class="good"></div>
</div>
<hr>
4、子元素是不定宽的块元素，最常见的就是分页导航
a、水平居中:在父元素上设置：text-align:center <br>
b、垂直居中:可分页的ul，设置行高与父元素等高：line-height <br>
c、等底居中：最为常用，与多行文本垂直居中的方式是一样的display:table-cell; vertical-align：bottom
<div id="happy3">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
