实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四个对齐演示</title>
<style>
.contentone{ width:600px; margin: 0 auto; background-color: #e6e6e6;}
.contenttwo{ width:600px; margin: 0 auto; background-color: #e6e6e6;padding-top: 20PX；display:table-cell;vertical-align:middle;}
.contentthree{ width:600px; margin: 0 auto; background-color: #e6e6e6;display:table-cell;vertical-align:middle;}
.one {height: 80px;margin-top: 10px;}
.one p{text-align: center;line-height: 80px;background-color: #f00;}
.two{background-color: #F00;text-align:center;}
.two span{line-height: 100PX;}
.three{width: 100px;height: 100px;}
.contentthree .three { margin: auto; }
.contentfour{}
.four{text-align: center;vertical-align:bottom;height: 50px;}
.four ul {background-color: #f00;line-height=parent.height;line-height: 50px;}
.four li{list-style: none;display: inline;}
</style>
</head>
<body>
<div class="contentone">
<h3>1、行内对齐</h3>
<div class="one"><p>我是一行</p></div>
<div class="contenttwo">
<h3>2、多行内联文本</h3>
<div class="two">
<span>哎吆不错哦</span>
<span>哎吆不错哦</span>
</div>
</div>
<div class="contentthree">
<h3>3、块元素居中</h3>
<div class="three"><img src="http://www.php.cn/tpl/Index/Static/css/img/common/logo.png?t=1" alt=""></div>
</div>
<div class="contentfour">
<h3>4、不定宽的块元素</h3>
<div class="four">
<ul>
<li>点我</li>
<li>点我</li>
<li>点我</li>
<li>点我</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
