实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bebebe;
text-align: center; /*使行内元素在块元素水平居中*/
}
/*单行文本*/
.box a{
line-height: 200px; /*使行内元素水平垂直居中*/
}
/*多行文本*/
.box1{
/*margin: auto;*/ 浏览器自动计算
width: 200px;
height: 200px;
/*border: 1px solid green;*/
background-color: #bebebe;
text-align: center;
padding: 100px;
display: table-cell; 将块显示改为表格单元格方式
vertical-align: middle; 单元格内的元素垂直居中
}
/*块元素*/
.box2{
width: 400px;
height: 400px;
background-color: #bebebe;
display: table-cell; /*将块显示改为表格单元格方式*/
vertical-align: middle; /*单元格内的元素垂直居中*/
}
.box2 .box22 {
width: 200px;
height: 200px;
background-color:green;
margin: auto;
}
.box2 img { /*中间需要加空格*/
width: 100px;
height: 100px;
padding: 50px;
}
/*不定宽的块元素*/
.box3{
width: 200px;
height: 200px;
background-color: #aaaaaa;
text-align: center;
display: table-cell;
vertical-align:bottom;
}
.box3 ul {
margin: 0;
padding: 0;
}
.box3 li{
list-style: none;
display: inline;
padding: 10px;
}
</style>
</head>
<body >
<h1>块</h1>
<div class="box"><a href="">php-left</a></div><br>
<div class="box1"><h2><a href="">php-top</a><br>php-center</h2></div><br>
<div class="box2">
<div class="box22"><img src="2.png" alt=""></div>
</div><br>
<div class="box3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
