垂直居中的几种实现方法
标签:
自适应
垂直居中
CSS
相关
| 发表时间:2011-10-10 15:26 | 作者:sofish Charles
出处:http://sofish.de
用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全)。今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:
一、利用 position 和负边距
利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:
/* 代码实现: * 设定宽度和高度,父节点为 position:relative; CSS是这样写的: */ .selector { position:absolute;top:50%;。 margin-top:-元素自身高度的一半; }
二、使用 <table />
<table />
真是各种好用,她是各种布局、居中的法宝。垂直居中对其来说,也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。所以实现起也来只要这样一行代码:
td{ vertical-align:middle; }
三、通用解决方案
使用第一方案的问题是,通常我们需要垂直居中的元素高度都是不确实的。这里我们需要用 JS 来实现高度的计算,再实现负边;而第二种方案的局限在于只应用于 <table />
。其实是,我们可能综合这两种方法,来做一个 Hack。
像我们知道的,在 CSS2.1 中,任何元素都可以使用 display:table / display:table-cell来实现与 table 一样的功能。那么,只要支持 display:table 的浏览器,已经可以轻松解决,只要这样写代码:
<!-- DOM 结构 --> <div> <p>content</p> </div> /* CSS 实现 */ div { display:table; } p{ display:table-cell; vertical-align:middle; }
但问题是,这种方法在 IE6/7 是不能实现的,因为他们不支持 display:table 这个特性。那有没有办法不计算高度,利用第一种方案来实现垂直居中呢?其实也未尝不可。看看下面这个 DOM 结构和图示:
<div class="wrap"> <div class="hack"> <div class="cnt"> content </div> </div> </div>
其实我们只要加多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%。如上图所示。这里有一个 DEMO:
/* CSS 部分的代码实现:整体代码参见上述 demo*/ .wrap{ width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table; *position:relative; } .hack{ display:table-cell;vertical-align:middle; *position:absolute;*top:50%; } .cnt{ *position:relative;*top:-50%; }
这是在支付宝通用解决方案中实现的一个方案。=_,= 欢迎提供更好的方案…
相关 [垂直 方法] 推荐:
用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了. 因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全). 今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:. 一、利用 position 和负边距.
垂直网站二次崛起
- redhobor - 《商业价值》杂志得益于社交网络、电子商务和移动互联浪潮对互联网基础架构进行的升级,垂直网站从当初的细分领域信息提供者,变成线上与线下商务对接的最佳通道. 历史已经迎来了垂直网站再次崛起的时代. 当地时间7月23日,Facebook投资人、投资公司Elevation Partners合伙人罗杰·迈克奈米(Roger McNamee)在接受媒体采访时语出惊人:社交网络的机会已经“完结”.
垂直互联网的思考
- coofucoo - 月光博客 电商平台型企业征战十年,争的是广度、用户、价格. 而征战的结果是大鱼挤兑小鱼,小鱼连挤兑虾米的资格都没有,因为互联网太透明,用户的变数性太大,平台与平台之间的同质化严重,差异化小,所以,笔者认为平台之争的结果实际上就是价格战之争,拼谁更有拿钱和烧钱的本事. 而对于垂直细分类品牌,笔者认为他是未来电子商务发展的热点、重点、盈利点.
再谈垂直和水平切分
- - 人月神话的BLOG本篇为在应用集中化背景下,数据库集群本身的垂直和水平切分方法的点滴思考. 首先我们看应用的垂直切分,应用本身包括了两大类型的应用,一种是以核心数据为中心的应用,一种是以纯粹的流程工单为核心的应用. 前者如资产管理,主数据管理等相关应用;后者如运维工单管理,OA办公管理等应用. 对于工单型应用各种工单流程之间相互耦合性非常底,共享的基础数据也相当少,因此这类应用相当容易进行垂直切分,而且切分的也相当干净;而对于资产管理这类应用,.
社区,创意,产品:垂直电商 Quirky 不走寻常路
- MooM - 爱范儿 · Beats of BitsQuirky 成立于2009年3月,是一家创意产品社区与电子商务网站,专注于创意产品细分市场(厨卫小工具、数码设备配件、儿童玩具、运动与旅行辅助装备等). 它最大的特点是,在 Quirky 里的所有商品都是由 Quirky 社区参与开发的. 用户可以在网站上提交他们的产品创意,里面包括产品的描述、理念等.
SpaceX展示未来的垂直着陆火箭
- 微笑!?~ - Solidot私人太空公司SpaceX的CEO Elon Musk上月底在美国新闻俱乐部上讨论了未来的载人飞行(C-Span视频),他用一个令人惊叹的CG视频(MP4)演示了火箭和飞船的可复用性. 在视频中,SpaceX展示了可能只存在于科学幻想中的未来整体可复用火箭和飞船,火箭的第一级和第二级脱离飞船,重返大气层,然后在这一过程中利用自身动力抵消地球引力,以垂直方式着陆,飞船在完成任务返回地球后同样以垂直方式而不是使用降落伞着陆.
deviantART:1400万独立艺术家的垂直SNS
- 彭全兵 - 互联网的那点事...没有他的PSP2游戏机,安吉洛·索蒂拉(Angelo Sotira)就像一个坐立不安、手足无措的孩子. 他单薄、衣着时尚但不修边幅,一条True Religion高端牛仔热裤,配上一件带有碎洞的牛仔衣,让他看起来很有艺术气质,并且远比他30岁的实际年龄年轻得多. 在谈到他所开创的这个全球最早、最大的社交网络时,他激情四射,说到激动处会在沙发前来来回回地走动;有时也会将双腿跷到咖啡桌上或者斜靠着它轻松地回忆或畅想——这足见他不是一个循规蹈矩的人.
商业价值:垂直网站二次崛起
- Yiding - GeekPark 捕风捉影得益于社交网络、电子商务和移动互联浪潮对互联网基础架构进行的升级,垂直网站从当初的细分领域信息提供者,变成线上与线下商务对接的最佳通道. 历史已经迎来了垂直网站再次崛起的时代. 当地时间7月23日,Facebook投资人、投资公司Elevation Partners合伙人罗杰·迈克奈米(Roger McNamee)在接受媒体采访时语出惊人:社交网络的机会已经“完结”.
我要投诉:垂直的投诉类点评移动应用
- - 动点科技-独立原创科技博客我要投诉是一个专门面向消费者的,用来发布和查看商家投诉的移动应用. 主要功能有两个:一是发布投诉,需用新浪微博登录后发布,可以手动查找商家,或直接查看附近商家. 发布投诉的形式包括文字、语音、图片. 默认发布之后,该信息会同步在我要投诉的官方微博,以通过社会化网络进行传播,扩大影响;. 二是投诉查看,可以按照周边、排行榜、最新和最搞投诉四类来查看.