(转载自http://www.ctba.cn/blog/entry/2251)
1. 单行文字在固定高度容器中垂直居中
这个最简单,只要让行间距 line-height 与容器高度 height 相等即可;
1. #box { height: 120px; line-height: 120px; overflow: hidden }
2. 多行文字在未知高度容器中垂直居中
这个也很简单,将 padding-top 与 padding-bottom 设置成相同的值即可;
1. #box2 { padding: 10px 0 }
3. 多行文字在固定高度容器中垂直居中(非 IE 浏览器)
1. #box3_wrapper {
2. display: table;
3. height: 311px;
4. background: #eee
5. }
6. #box3 {
7. display: table-cell;
8. vertical-align: middle
9. }
Html代码 复制代码
1. <div id="box3_wrapper">
2. <div id="box3">
3. 作者:shimano<br />
4. 如何既给用户提供最大限度的编辑权限<br />
5. 又能保证网页整体的规范和美观?<br />
6. 真 TMD 难啊!
7. <div>
8. </div>
注意:这其中有个关于字号的问题,在 XP 和 Vista 及 Mac 下即使设定了像素为单位的字号,文字大小也依旧不同,这个在我之前一个篇日志里也提到过,在 XP 下,12px 宋体是 11x11(px)的,在 Vista 下有些文字高 11px 有些高 12px,这也是为什么 Vista 下的宋体看起来比较奇怪,Mac 下默认就是平滑边缘的黑体,再有就是 safari 下平滑边缘的宋体,所以更不容易辨别。
如果细究,在不设定高度和行间距的容器中,12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距,XP 的 IE6 下,字下沿有 3px ,字上沿为 0;Firefox 下,字上沿为 1px,下沿为2px;Vista 下,文字上下各 1px 间距(考虑同等高度文字);这可以理解为默认 line-height,在 这篇日志 中我也是遇到了同样的问题。
关于 IE6 下 line-height 的问题我在 这篇日志 中有提。
4. 多行文字在固定高度容器中垂直居中(IE 浏览器)
因为 IE 不支持将 div 显示为 table 及其同胞,所以我们要另想办法:
Css代码
1. #box3_wrapper {
2. position: relative;
3. }
4. #box3_inner {
5. position: absolute;
6. top: 50%
7. }
8. #box3 {
9. position: relative;
10. top: -50%;
11. background: #eee
12. }
Html代码
1. <div id="box3_wrapper">
2. <div id="box3_inner">
3. <div id="box3">
4. 这种方法<br />
5. 在下面的未知高度 div 垂直居中<br />
6. 也用到了
7. </div>
8. </div>
9. </div>
下面有个权衡 IE 与 非 IE 浏览器浏览效果的实现方法,请继续看
5. 未知高度 div 的垂直居中
Css代码 复制代码
1. #box4_wrapper {
2. height: 100%;
3. width: 100%;
4. overflow: hidden;
5. position: relative
6. }
7. #box4_wrapper[id] {
8. display: table;
9. position: static
10. }
11. #box4_outer {
12. position: absolute;
13. top: 50%
14. }
15. #box4_outer[id] {
16. display: table-cell;
17. vertical-align: middle;
18. position: static
19. }
20. #box4_inner {
21. position: relative;
22. top: -50%;
23. margin: 0 auto;
24. background: #eee
25. }
Html代码
1. <div id="box4_wrapper">
2. <div id="box4_outer">
3. <div id="box4_inner">
4. 这是一种无 hack 的方式<br />
5. 虽然环保,但是臃肿:(
6. </div>
7. </div>
8. </div>
CSS2 选择符 #value[id] 相当于 #value,但是 IE 不支持这种类型的选择符,使用这种方式区分浏览器避免 hack:)
6. 未知尺寸图片(小与容器高度)在固定高度容器中垂直居中
1. #box5 {
2. display: table-cell;
3. *display: block;
4. *font-size: 175px;
5. *font-family: Arial;
6. vertical-align: middle;
7. height: 200px;
8. width: 200px
9. }
10. #box5 img {
11. vertical-align: middle
12. }
Html代码 复制代码
1. <div id="box5">
2. <img src="img/ctba.png" alt="扯谈社" />
3. </div>
<div id="box5">
<img src="img/ctba.png" alt="扯谈社" />
</div>
淘宝 UED 07 前端开发原题。解释下针对 IE 的 hack:在 IE 下,将字号设置为容器高度的 0.873(本例中即 200*0.873 = 175)图片便会垂直居中;字体设置为 Arial 主要防止非 utf-8 引起的 hack 失效问题,如 gbk 编码(摘自译飞的博客)
当然如果只是图片,在针对非 IE 浏览器时利用单行文字的垂直居中方法也可以。
分享到:
相关推荐
div框水平垂直居中跟内容垂直居中
图片水平垂直居中 用很精简的代码,实现图片水平垂直居中 效果
VB文本垂直居中,主要是为了补TEXTBOX不能垂直居中的不足
继承系统的TextBox,支持文字垂直居中;自动折行(即WordWrap = True)也支持垂直居中。
垂直居中显示ie7+
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
大多数文本框中文字都垂直靠上,很不美观,该控件使文字垂直居中。
position: absolute,display:table-cell,display:flex四种垂直居中的方法
VCenterEdit一个比较完美的文本垂直居中的CEdit类。该类来源于网络上的CVEdit类,加入了处理ReadOnly栏目的代码,构成一个比较实用的VCenterEdit一个比较完美的文本垂直居中的CEdit类。供大家参考交流。经测试,可以...
CSS实现完美垂直居中 - 蓝色理想
教你如何把Winform TextBox 垂直居中的类文件 京华志&精华志出品 希望大家互相学习,互相进步 支持CSDN 支持微软
对CEdit封装,实现垂直居中设置,字体颜色背景色的设置,以及插入符的设置; 主要接口: void SetBkColor(COLORREF dwBkColor); void SetTextColor(COLORREF dwTextColor) ; void SetBorderColor(COLORREF dwTopLeft...
任意图片在div里的垂直居中!
DIV+CSS 图片垂直居中效果
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
pb数据窗口美化,pb12.5源码,数据窗口字体垂直居中,自定义grid类型线条颜色
CEdit框字体垂直居中
1、定制Datawindow GRID模式的外观,包括线条、文本垂直居中、背景颜色和背景图片、选择块颜色、当前行颜色、合并表头、编辑框按钮等 2、提供了窗口自动控件缩放布局功能 3、改进了打开和保存对话框
弹出层(遮罩层)弹出页面垂直居中,一个不错的例子,可拿来使用。
易语言文本垂直居中源码,文本垂直居中,偏移矩形_,SendMessage