赞
踩
1、table布局:
利用display:table+display:table-cell的方法
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <style>
- .middle-box{
- display: table; /*重点*/
- height: 300px;border: 1px solid #000;
- }
- /*重点:table-cell布局*/
- .middle-inner{
- display: table-cell;
- vertical-align:middle;
- text-align:center;
- }
- </style>
- <body>
- <div class="middle-box">
- <div class="middle-inner">
- <p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
- <p style=""><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
- </div>
- </div>
- </body>
- </html>
效果:
利用display:table-cell
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <style>
- .middle-box{
- display: table; /*重点*/
- height: 300px;border: 1px solid #000;
- }
- /*重点:table-cell布局*/
- .middle-inner{
- display: table-cell;
- vertical-align:middle;
- text-align:center;
- height: 200px;
- border:1px solid #000;
- }
- </style>
- <body>
- <div class="">
- <div class="middle-inner">
- <p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
- <p style=""><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
- </div>
- </div>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>css居中对齐</title>
- <style>
- *{padding: 0;margin:0;font-size: 12px;}
- div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;}
- </style>
- <div>
- <span>测试文字测试文字</span>
- </div>
- <div>
- 测试文字测试文字
- </div>
- <div>
- <p>测试文字测试文字</p>
- <p>测试文字测试文字</p>
- </div>
- </body>
- </html>
效果:
优点:等高布局,无需设置高度,文字轻松实现垂直居中
缺点:ie7以下不兼容!
2、利用line-height和vertical-align:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>css居中对齐</title>
- <style>
- *{padding: 0;margin:0;font-size: 12px;}
- div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid #000; line-height: 200px;}
- span{display: inline-block;vertical-align: middle;line-height: 22px;}
- </style>
- <div>
- <span>测试文字测试文字</span>
- </div>
- <div>
- <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>
- </div>
- </body>
- </html>
效果:
关键样式:
① 父元素(这里是div)设置和高度一致的 line-height (这里是200px)--- 由后面的vertical-align定义看,这是为了设置div的基线
② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle; --- inline水平的元素无法设置line-height,所以这里要设置inline-block。
重新审视一下 CSS vertical-align 属性 的定义:
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,允许指定负长度值和百分比值,这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
有以下几点需要注意:
① vertical-align属性应该设置到 行内元素上(行内块元素也可)
② 如果文字的总高度超出了 容器(这里是div)的高度,那么垂直居中会失效。
③ ie7以下 span结束标签和内部内容不能有间隔空白,也就是说span的结束标签和内部内容要连在一起。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。