inline-block垂直居中

最新推荐文章于 2023-02-09 16:14:40 发布

大拿加拿大

最新推荐文章于 2023-02-09 16:14:40 发布

阅读量1.4k

点赞数

文章标签： html inline-block css 垂直居中

从http://bbs.blueidea.com/thread-3013342-1-1.html转来的代码

<!DOCTYPE HTML>
<html>
	<head>
	    <meta meta charset="utf-8">
	    <title>Demo</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>
	</body>
</html>