实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月23日作业</title>
<style>
.logo{
width: 200px;
height: 50px;
background-color: skyblue;
float: left;
text-align: center;/*可以使行内元素水平居中*/
/*以下二个声明设置垂直居中*/
display: table-cell;/*设置显示方式为表格单元格*/
vertical-align: middle;/*设置该单元格内的元素垂直居中*/
}
.nav{
width: 700px;
height: 50px;
background-color: yellow;
text-align: center;/*可以使行内元素水平居中*/
}
.nav ul{
padding-left: 0;
line-height: 50px;/*子元素设置行高与父元素高度相同实现垂直居中*/
}
.nav li{
list-style: none;
display: inline;
margin: 15px;
}
.main{
width: 700px;
height: 200px;
background-color: red;
/*以下二个声明可以使块级子元素垂直居中*/
display: table-cell;/*设置显示方式为表格单元格*/
vertical-align: middle;/*设置该单元格内的元素垂直居中*/
}
.main .banner{
width: 100px;
height: 100px;
background-color: #f4ff0a;
margin:auto;/*水平居中*/
}
.content{
width: 700px;
height: 200px;
background-color: #ffff0a;
text-align: center;/*可以使内部行内元素水平居中*/
}
.content span{
line-height: 200px;/*子元素设置行高与父元素高度相同*/
}
.footer{
width: 700px;
height: 100px;
background-color: skyblue;
text-align: center;/*可以使内部多行行内元素水平居中*/
/*以下二个声明可以使多行文本垂直居中*/
display: table-cell;/*设置显示方式为表格单元格*/
vertical-align: middle;/*设置该单元格内的元素垂直居中*/
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><img src="http://cloud.zhibo1314.com/logo.png" alt=""></div>
<!-- 子元素是不定宽的块元素：最常见的就是分页导航
a:水平居中：在父元素上面设置：text-aligin:center;
b:垂直居中：给分页的ul加行高line-height,等于它的父元素高度 -->
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">html</a></li>
<li><a href="">css</a></li>
<li><a href="">javascript</a></li>
<li><a href="">php</a></li>
<li><a href="">mysql</a></li>
</ul>
</div>
</div>
<!-- 子元素是块元素
a:水平居中：子元素设置左右自动：margin:auto;
b.垂直居中:与多行内联文本处理方式一致:display:table-cell;vertical-align:middle-->
<div class="main">
<div class="banner"></div>
</div>
<br>
<!-- 子元素是行内元素：如：a,span
a:水平居中：在父元素上面设置：text-align:center;
b:垂直居中：在子元素上设置行高与父元素等高：line-height
-->
<div class="content">
<span>网站内容</span>
</div>
<!-- 子元素是多行内联文本
a:水平居中：在父元素上面设置：text-align:center;
b:垂直居中：父元素上设置display:table-cell;vertical-align:middle; -->
<div class="footer">
<span>本网站版权所有</span><br>
<a href="">赣ICP备12828828号</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果：
手抄代码：
