通过css对4种元素控制实现对齐
代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css4种对齐方式</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #ff0;
/*1.子元素是行内元素:如:a,span
a.水平居中:在父元素上设置: text-align:center;
b.垂直居中:在行内子元素上设置行高与父元素相同: line-height*/
text-align: center;
line-height: 200px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
text-align: center;
/*2. 子元素是多行内联文本 a.水平居中:父元素设置text-align:center b.垂直居中:父元素设置:display:table-cell;vertical-align:middle*/
display: table-cell;
vertical-align: middle;
}
.box2 p{
-webkit-text-fill-color:red;
}
.box3{
width: 200px;
height: 200px;
background-color: blue;
/*3. 子元素是块元素:
a.水平居中:子元素设置左右自动: margin: auto;
b.垂直居中:与多行内联文本处理方式一致:display:table-cell;vertical-align:middle*/
display: table-cell;
vertical-align: middle;
}
.box3 .child{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: auto;
}
/*4. 子元素是不定宽的块元素:最常见的分页导航
a.水平居中:子元素转行内元素,父元素加:text-align:center
b.垂直居中:可给分页的ul加行高line-height=parent.height c.底边居中:更为常用,与多行内联文本垂直处理方式一致,vertical-align:bottom;*/
.box4{
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="box1">我在这里看到了吗？</div>
<div class="box2"><p>我在这里 <br>快来看啊</p></div><hr>
<div class="box3">
<div class="child"></div>
</div><hr>
<div class="box4">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：1.子元素是行内元素:如:a,span
a.水平居中:在父元素上设置: text-align:center;
b.垂直居中:在行内子元素上设置行高与父元素相同: line-height
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=parent.height c.底边居中:更为常用,与多行内联文本垂直处理方式一致,vertical-align:bottom;