实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3月23日作业-对齐方式</title>
<style type="text/css">
div{
height: 200px;
width: 200px;
}
/*父元素是块元素,子元素是行内元素
*/
.box1{
background-color: #ff3366;
/*水平居中*/
text-align: center;
}
.box1 a{
/*使内容水平 垂直居中*/
line-height: 200px;
}
.box2{
background-color: fuchsia;
text-align: center;
/*多行文本的垂直居中*/
display: table-cell;
vertical-align: middle;
}
.box2 span{
display: block;
}
.box3{
background-color: forestgreen;
/*使子元素垂直居中 设置padding*/
/*padding: 75px;*/
/*box-sizing: border-box;*/
/*改变display 为table-cell*/
display: table-cell;
vertical-align: middle;
}
.child{
width: 50px;
height: 50px;
background-color: #ff8899;
/*水平居中*/
margin: auto;
}
.box4{
background-color:slateblue;
text-align: center;
/*以下二个声明可以使块级子元素垂直居中*/
display: table-cell;
vertical-align: bottom;
}
.box4 ul{
padding: 0px;
margin: 0px;
}
.box4 ul li{
display: inline;
}
.box4>ul>li>a:hover{
color: red;
font-size: 1.1em;
}
</style>
</head>
<body>
<h4>父元素是块元素,子元素是行内元素</h4>
<div class="box1">
<a href="">我是一个超链接</a>
</div>
<hr>
<h4>子元素是多行内联文本 </h4>
<div class="box2">
<span>我是一个span标签</span>
<span>我是一个span标签</span>
</div>
<hr>
<h4>子元素是块级元素</h4>
<div class="box3">
<div class="child"></div>
</div>
<hr>
<h4> 子元素是不定宽的块元素</h4>
<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>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
