您当前的位置: 首页 > 技术文章 > 前端开发

用inline-block设置垂直居中

作者:licqi 时间:2011-03-03阅读数:人阅读
文本内容在容器中要做到垂直居中,想必大家也都能想到几种,基于table的相关属性样式;单行情况行高高度;单一块在位置容器中定位补偿方法。 但是下面的贴图中我所给出的要求,用以上的方法都不能很好的满足要求,主要因为代码结构复杂,因此给出了另一种方法,该方法利用的是inline-block具有inline属性,来利用inline元素对基线的处理方式来解决垂直居中的问题。 贴图: 用inline-block设置垂直居中(图1) 要求: 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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦