323居中

$6`}X00T}GS4J{F{N]}}]9_G.png$
实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>几种对齐效果</title>
	<style type="text/css">

	.one{
		width: 300px; 
		height:30px;
		text-align: center;
		line-height: 30px;
		background-color: #276;
	}

	.two{
		width: 300px;
		height:80px;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		background-color: #963;
	}

	.three{
		width: 300px;
		height: 50px;
		background-color: #916;	
		display: table-cell;
		vertical-align: middle;


	}

	.three1{
		 width: 100px;
		 height: 30px;
		 background-color: #529;
		 margin: auto;
		 text-align: center;
		 line-height: 30px;



	}
	
	
	.four{
		width: 300px;
		height: 30px;	
		background-color: #582;
		text-align: center;
		display: table-cell;
		vertical-align: bottom;
		
	}
	ul{
		
		margin: 0;
		padding: 0;
	}
	 li{
		list-style: none;
		display: inline;
	}
	</style>
</head>
<body>
	<!-- 单行文字居中 -->
	<div class="one">资料中心
	</div> 
	<br>
	 <!-- 多行文字居中 -->
	 <div class="two"><p>关于内部资料管理 <br>
	 	内部资料禁止外传，一经发现严肃处理！</p>
	 </div>
	 <br>
	 <!-- 块居中 -->
	 <div class="three">
	 	<div class="three1">禁止下载
	 	</div>
	 	
	 </div>
	 <br>
       <!-- 不定宽居中 -->
    <div class="four">
    	<ul >
    		<li><a href="">首页</a></li>
    		<li><a href="">上一页</a></li>
    		<li><a href="">1</a></li>
    		<li><a href="">2</a></li>
    		<li><a href="">...</a></li>
    		<li><a href="">下一页</a></li>
    		<li><a href="">尾页</a></li>
    	</ul>
    </div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例

相关文章
