居中方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素对齐作业</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.box2{
width: 40px;
height: 40px;
background-color:#363636;
margin: auto;/*水平居中特殊情况（子元素是块元素）*/
}
.box3 {
width: 200px;
height: 200px;
background-color: aquamarine;
text-align: center/*子元素不是块元素，父级元素上设置*/
}
/*首先让它飘起来*/
.box3 li{
list-style: none;
display: inline;
}
/*减去padding*/
.box3 ul{
padding: 0;
}
.box11 {
width: 200px;
height: 200px;
background-color: aquamarine;
display: table-cell;
vertical-align:middle;
/*多行文本的垂直居中要加水平居中 特例 */
text-align: center;
}
.box12 {
width: 200px;
height: 200px;
background-color: aquamarine;
/*首先要水平居中才能垂直居中*/
text-align: center;
}
.box12 span{
line-height: 200px;
}
.box13 {
width: 200px;
height: 200px;
background-color: aquamarine;
/*首先要水平居中才能垂直居中*/
text-align: center;
}
.box13 span{
line-height: 200px;
}
/*同样的要浮动和panding=0*/
.box13 li{
list-style: none;
display: inline;
}
.box13 ul{
line-height: 200px;
padding: 0;
}
.box14 {
width: 200px;
height: 200px;
background-color: aquamarine;
display: table-cell;
vertical-align:bottom;
/*多行文本的垂直居中要加水平居中 特例 */
text-align: center;
}
.box14 li{
list-style: none;
display: inline;
}
.box14 ul {
padding: 0;
}
</style>
</head>
<body>
<!--1.水平居中
1.1子元素是块元素，子元素上设置左右自动-->
<div class="box1">
<div class="box2"></div>
</div>
<hr>
<!--1.2子元素不是块元素在父元素上设置text-align:center-->
<!--单行文本-->
<div class="box3"><span>单行行内文本</span></div>
<hr>
<!--多行文本-->
<div class="box3">
<span>多行行内文本</span><br>
<a href="">水平居中</a>
</div>
<hr>
<!--不定宽元素-->
<div class="box3">
<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>
<li><a href="">6</a></li>
</ul>
</div>
<hr>
<hr>
<!--2.垂直居中
2.1子元素是多行行内文本或者块元素在父元素上设置display:table-cell vertical-align= middle-->
<div class="box11">
<span>单行行内文本<br>
php中文网<br>
</span>
</div>
<hr>
<div class="box11">
<div class="box2"></div>
</div>
<hr>
<!--2.2 单行行内元素和不定宽-->
<!--首先水平居中，然后子元素行高line-height等于父元素的高度-->
<div class="box12"><span>单行垂直</span></div>
<!--ul标签行高line-height等于父元素的高度-->
<!--/*同样的要浮动和panding=0*/-->
<hr>
<div class="box13">
<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>
<li><a href="">6</a></li>
</ul>
</div>
<hr>
<!--(3).底边居中：设置单元格底边居中，与多行文本垂直居中的处理方式一样vertical-align=bottom-->
<div class="box14">
<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>
<li><a href="">6</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
