用inline-block设置垂直居中
作者：licqi 时间：2011-03-03阅读数：人阅读
文本内容在容器中要做到垂直居中，想必大家也都能想到几种，基于table的相关属性样式；单行情况行高高度；单一块在位置容器中定位补偿方法。
但是下面的贴图中我所给出的要求，用以上的方法都不能很好的满足要求，主要因为代码结构复杂，因此给出了另一种方法，该方法利用的是inline-block具有inline属性，来利用inline元素对基线的处理方式来解决垂直居中的问题。
贴图：
要求：
1.每行信息在说明文字少的时候有默认的最小高度，
2.每列要求各个数据垂直居中对齐。每个位置的数据都有可能是单行或多行，数据完全显示
3.每行之间有间距。
4.要求IE6以上以及其他浏览器兼容，
5.视觉要保证正确。
以下是代码：
[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>[/html]
原文的地址中有更详细的描述并给出了另外减少代码的方法。
地址：用inline-block设置垂直居中
要求：
1.每行信息在说明文字少的时候有默认的最小高度，
2.每列要求各个数据垂直居中对齐。每个位置的数据都有可能是单行或多行，数据完全显示
3.每行之间有间距。
4.要求IE6以上以及其他浏览器兼容，
5.视觉要保证正确。
以下是代码：
[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>[/html]
原文的地址中有更详细的描述并给出了另外减少代码的方法。地址：用inline-block设置垂直居中
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：licqi@yunshuaiweb.com
上一篇:网页经典代码
