<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3好牛逼，能让文字完全居中</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
header {
width: 640px;
height: 150px;
background-color:grey;
margin: 0 auto;
}
.test {
width: 100px;
height: 150px;
background-color: red;
vertical-align: middle;
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
}
.test *{vertical-align:middle;}
</style>
</head>
<body>
<header>
<div class="test">
<img src="img/del.png" />
<span>ggg</span>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3好牛逼，盒子布局很强大</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
display: -moz-box;
display: -webkit-box;
}
#left_container , #middle_container , #right_container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#left_container , #right_container {
width: 200px;
padding: 20px;
background-color: red;
text-align: center;
}
#middle_container {
-moz-box-flex: 1;
-webkit-box-flex: 1;
padding: 20px;
background-color:grey;
}
</style>
</head>
<body>
<div id="container">
<div id="left_container">
<h2>左栏布局</h2>
<nav>
<ul>
<li>超链接</li>
<li>超链接</li>
<li>超链接</li>
<li>超链接</li>
</ul>
</nav>
</div>
<div id="middle_container">
<h2>内容二</h2>
<p>
实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字
</p>
</div>
<div id="right_container">
<h2>右栏布局</h2>
<nav>
<ul>
<li>超链接</li>
<li>超链接</li>
<li>超链接</li>
<li>超链接</li>
</ul>
</nav>
</div>
</div>
</body>
</html>