偶看新闻成都金吉列招聘:vertical-align 图片文字水平对齐分析
来源：百度文库 编辑：偶看新闻 时间：2024/04/27 22:46:00
2011年9月7日 1:26 am - 代码浅谈 - css
最近接触了许多 关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~
demo 传送门： vertical-align 各属性分析 有错误欢迎回复纠正哦 ^__^
一些心得体会：
vertical-align 定义
最初我认为的vertical-align 解释 跟text-align 一样，是容器内部的非block 元素居中对齐，但~~ 我理解错了
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。
vertical-align:baseline 基线对齐
分析所得，发现baseline不是在中文字的可见部分最下方，而是在英文字的可见部分最下方。
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。一直觉得为啥图片下方会有4像素的空白，现在明白了
不同字体会有不同效果
我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。
vertical-align 最好不要混用
从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。
vertical-align: px 定位最稳定
这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。
在研究中发现使用相对定位兼容性最好，只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计。
不过这种方法也不是万能的，
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置 看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。
另外图片大小不一样大相应的负值也不相同，详细见demo。
高潮：vertical-align 最佳兼容方案
前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。
2. 针对 内部需要调整位置的 图片等 进行 px 定位。
优点：保证外围的vertical-align 是默认值，不产生混用现象。
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。
下一步研究方向：表单元素的vertical-align: px 是否同样适用 ？
该文章已经被摸了402次。 共有 11 条评论
1.
小豪 2011年9月7日 at 19:20?
对，同样适用
回复
2.
mice 2011年9月9日 at 11:54?
目前IE7 版本用户很少可无视
—————————————-
但个人觉得用ie7模式渲染的人不在少数..
当用第三方浏览器(如遨游,世界之窗,绿色浏览器,搜狗浏览器[不过搜狗浏览器里面可以设置使用IE8渲染]等等),但使用的是IE8内核的时候,就会用IE7模式渲染(又貌似是IE8兼容模式,没具体研究o(︶︿︶)o)..
回复
飞鱼 Reply:
September 9th, 2011 at 12:08
对，的确第三方浏览器 会有不同的效果，这次研究没有 测过 第三方浏览器，有空遍历一下第三方浏览器，看看效果如何
回复
3.
马啃菠箩 2011年9月11日 at 18:59?
图是蒙的 我眼花了？
回复
飞鱼 Reply:
September 11th, 2011 at 22:10
a haha~~
回复
4.
Glow 2011年10月6日 at 17:57?
有的时候，font-family属性也会对文字行高产生影响，请博主抽空看下这个帖子http://bbs.blueidea.com/thread-3023326-1-1.html
回复
飞鱼 Reply:
October 9th, 2011 at 12:18
嗯 这个我也发现了，demo 里有说明，不过没有仔细研究过。
回复
5.
一丝冰凉 2011年10月12日 at 18:28?
对于表单元素同样适用，tahoma字体是关键，在12px下 vertical-align:-2px是比较好的解决方案，有兴趣可以看看我在蓝色理想发的帖子：表单元素与文字的垂直居中（一丝冰凉 用户体验 爱好者）
回复
飞鱼 Reply:
October 12th, 2011 at 23:48
嗯 ，不过我最近也发现 也会有一些诡异的结构，破坏这样的结论，具体还在研究钟。 ^__^
回复
6.
Jace 2011年10月18日 at 9:59?
文字和图标都vertical-align:middle;
各浏览器下都可以免测
回复
7.
呆呆 2011年11月2日 at 18:02?
话说最近也一直在研究这个……经常遇到这种情况：
你好你好吗 然后外面一层p可能还会有高度和行高，最后就导致要让不同游览器显示一样变得很蛋疼……
我一般都是用vertical-align的px来解决……本来想寄望于css 3的，不过貌似还是没找到……
回复
最近接触了许多 关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~
demo 传送门： vertical-align 各属性分析 有错误欢迎回复纠正哦 ^__^
一些心得体会：
vertical-align 定义
最初我认为的vertical-align 解释 跟text-align 一样，是容器内部的非block 元素居中对齐，但~~ 我理解错了
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。
vertical-align:baseline 基线对齐
分析所得，发现baseline不是在中文字的可见部分最下方，而是在英文字的可见部分最下方。
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。一直觉得为啥图片下方会有4像素的空白，现在明白了
不同字体会有不同效果
我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。
vertical-align 最好不要混用
从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。
vertical-align: px 定位最稳定
这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。
在研究中发现使用相对定位兼容性最好，只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计。
不过这种方法也不是万能的，
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置 看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。
另外图片大小不一样大相应的负值也不相同，详细见demo。
高潮：vertical-align 最佳兼容方案
前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。
2. 针对 内部需要调整位置的 图片等 进行 px 定位。
优点：保证外围的vertical-align 是默认值，不产生混用现象。
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。
下一步研究方向：表单元素的vertical-align: px 是否同样适用 ？
该文章已经被摸了402次。 共有 11 条评论
1.
小豪 2011年9月7日 at 19:20?对，同样适用
回复
2.
mice 2011年9月9日 at 11:54?目前IE7 版本用户很少可无视
—————————————-
但个人觉得用ie7模式渲染的人不在少数..
当用第三方浏览器(如遨游,世界之窗,绿色浏览器,搜狗浏览器[不过搜狗浏览器里面可以设置使用IE8渲染]等等),但使用的是IE8内核的时候,就会用IE7模式渲染(又貌似是IE8兼容模式,没具体研究o(︶︿︶)o)..
回复
飞鱼 Reply:September 9th, 2011 at 12:08
对，的确第三方浏览器 会有不同的效果，这次研究没有 测过 第三方浏览器，有空遍历一下第三方浏览器，看看效果如何
回复
3.
马啃菠箩 2011年9月11日 at 18:59?图是蒙的 我眼花了？
回复
飞鱼 Reply:September 11th, 2011 at 22:10
a haha~~
回复
4.
Glow 2011年10月6日 at 17:57?有的时候，font-family属性也会对文字行高产生影响，请博主抽空看下这个帖子http://bbs.blueidea.com/thread-3023326-1-1.html
回复
飞鱼 Reply:October 9th, 2011 at 12:18
嗯 这个我也发现了，demo 里有说明，不过没有仔细研究过。
回复
5.
一丝冰凉 2011年10月12日 at 18:28?对于表单元素同样适用，tahoma字体是关键，在12px下 vertical-align:-2px是比较好的解决方案，有兴趣可以看看我在蓝色理想发的帖子：表单元素与文字的垂直居中（一丝冰凉 用户体验 爱好者）
回复
飞鱼 Reply:October 12th, 2011 at 23:48
嗯 ，不过我最近也发现 也会有一些诡异的结构，破坏这样的结论，具体还在研究钟。 ^__^
回复
6.
Jace 2011年10月18日 at 9:59?文字和图标都vertical-align:middle;
各浏览器下都可以免测
回复
7.
呆呆 2011年11月2日 at 18:02?话说最近也一直在研究这个……经常遇到这种情况：
你好你好吗 然后外面一层p可能还会有高度和行高，最后就导致要让不同游览器显示一样变得很蛋疼……
我一般都是用vertical-align的px来解决……本来想寄望于css 3的，不过貌似还是没找到……
回复