使用Css实现水平垂直居中.pdf
《使用Css实现水平垂直居中.pdf》由会员分享,可在线阅读,更多相关《使用Css实现水平垂直居中.pdf(5页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、问题:假设有一个div,高宽都为 200px,如何使得 div 内的内容水平居中?很简单,设置该 div 的 style.textAlign为 center。水平居中示例。水平居中示例。问题:假设有一个div,高宽都为 200px,如何使得 div 内的内容垂直居中?使用 table的话,解决这个问题相当简单。哈哈哈 使用 Table 垂直居中 使用 Table 垂直居中 使用 Table 垂直居中 使用 Table 垂直居中 使用 Table 垂直居中使用 Table 垂直居中使用 Table 垂直居中若不使用 table,这个问题则有些复杂。如果只考虑某一个浏览器,也不会复杂到哪里去,但若
2、考虑兼容所有浏览器,需要下一定的功夫。由于 Html 元素我们可以分为三种:非可替换元素(如 span、label等)、可替换元素(img)、块元素(div)。我们可以把这个问题分成简单的三个问题。1.div 中只有文字,高度宽度未知。2.div 中只有图片,高度宽度未知。(但图片大小小于div。)3.div 中还有一个 div,高度宽度已知。第一个问题,可以使用 line-height等于该 div 的高度来解决,这样会限制该 div 内只能有一行文字。文字的垂直居中。文字的垂直居中。对于多行文字的 div,纯 css 实现目前比较无奈,IE 应该是没有办法做到。不过 IE 提供了 expr
3、ession,可以在这里面写一些js 脚本,再加上position的 relative和 absolute,可以搞定多行文字的垂直居中。display的 table 和 table-cell,FF是支持的。可以实现多行文字的垂直居中。下面代码中的 _position、_left、_top 的写法是专门针对IE 的。多行文字 垂直居中 多行文字垂直居中第二个问题,针对非IE 浏览器,我们可以使用WEB 标准里面的display:table-cell;vertical-align;middle;来解决。针对 IE 浏览器,则可以使用font-size的 hack 来解决。注意这里 font-siz
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 Css 实现 水平 垂直 居中
限制150内