你的位置:首页 > 网页设计

[网页设计]CSS垂直居中完美实用实例


<!DOCTYPE HTML>
<html>
<head>
<meta meta charset="utf-8">
<title>CSS垂直居中</title>
<style type="text/css" media="all">
body{color:black;background-color:white;padding:50px;font-size: 12px;line-height:16px;font-family:arial; color: #1E346E;}
* {margin: 0;padding:0;border-width: 0;}
.list{vertical-align: middle;width:640px;margin-bottom: 1px;border: solid 1px #00a0da;background-color:#F0F5FF; }
.list:hover{background-color:#d9e7f5;}
/*----------set vertical align middle----------*/
.list p,.list b { vertical-align: middle;display: -moz-inline-stack;display:inline-block;zoom:1;*display:inline;}
.list p { padding:10px;}
/*----------set min-height----------*/
.list b { height:52px;width:1px;overflow:hidden;margin-left:-1px;background-color:#009Cd0;}
</style>
</head>
<body>
<div ><b> </b><p >first class</p><p >Can be modified</p><p >Can be refunded.</p><p


>Can be endorsed</p></div>
<div ><b> </b><p >Economy class</p><p >Can be modified</p><p >Can be refunded.</p><p


>Can be endorsed</p></div>
<div ><b> </b><p >23% off Economy class</p><p >One free change permitted within same class if available; further


changes charged 10% of fare. Passengers must go to CA ticketing office to process fee-based changes.</p><p >10% of fare charged. </p><p


>Can not be endorsed</p></div>
<div ><b> </b><p >-6% off Economy class</p><p >Free change permitted within same class if available at least 4 days


prior to departure.</p><p >20% of fare charged (minimum CNY50 charge).</p><p >Can not be endorsed</p></div>
<div>http://www.999jiujiu.com/</div>
</body>
</html>