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 class="list"><b> </b><p style="width:80px;">first class</p><p style="width:160px;">Can be modified</p><p style="width:160px;">Can be refunded.</p><p

style="width:160px;">Can be endorsed</p></div>

<div class="list"><b> </b><p style="width: 80px;">Economy class</p><p style="width:160px;">Can be modified</p><p style="width:160px;">Can be refunded.</p><p

style="width:160px;">Can be endorsed</p></div>

<div class="list"><b> </b><p style="width:80px;">23% off Economy class</p><p style="width:160px;">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 style="width:160px;">10% of fare charged. </p><p

style="width:160px;">Can not be endorsed</p></div>

<div class="list"><b> </b><p style="width:80px;">-6% off Economy class</p><p style="width:160px;">Free change permitted within same class if available at least 4 days

prior to departure.</p><p style="width:160px;">20% of fare charged (minimum CNY50 charge).</p><p style="width:160px;">Can not be endorsed</p></div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

巴特西

CSS垂直居中完美有用实例

最新文章

热门文章