css中vertical-align(垂直对齐)的使用
来源:互联网 发布:凯迪网络社区官网 编辑:程序博客网 时间:2024/05/17 05:19
这两天写个页面css的时候用到了vertical-align属性,使用过程中踩到了坑,所以总结如下:
1.vertical-align的语法
vertical-align属性的具体定义列表如下:
语法: vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明: 设置元素内容的垂直对齐方式
值: baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与文本的顶端对齐;middle:中部对齐;bottom:底端对齐;text-bottom:文本的底端对齐;
百分比和长度:CSS2,可为负数。
初始值: baseline
继承性: 不继承
适用于: 行内元素和单元格(table-cell)元素
媒体: 视觉
计算值: 百分比和长度值为绝对长度;其他同指定值
特别提醒:vertical-align只对行内元素有效,对块级元素无效。
关于使用的详细介绍可以参考逍遥叹的《垂直对齐:vertical-align属性(转)》。
2.关于vertical-align:middle的问题
middle的时候,是该元素的中心对齐周围元素的中心。这里“中心”的定义是:图片当然就是height的一半的位置,而文字应该是基于baseline往上移动0.5ex。但是很多浏览器往往把ex这个单位定义为0.5em,以至于其实不一定是文字的正中心。
所以在使用middle的时候要特别注意,要在不同浏览器中调试。
3.我遇到的问题
页面局部html代码:
1 <ul class="gclearfix"> 2 <li>3 <em class="num top">1</em>4 <a href="#">我这段长长的文字只是来测试行内高度的的的的的的的的的的。。。。。。。。。。。。。</a>5 <a class="detail" href="#"></a>6 </li> 7 </ul>
相关样式表css代码:
1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;vertical-align: middle;}2 #hot-sou ul li .num{width: 15px;height: 15px;margin-top: 3px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;}3 #hot-sou ul li .top{background-color: #F6872C;}4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;}5 #hot-sou ul li .detail{width: 17px;height: 17px;line-height: 17px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;}
注意上图中的代码我在li中使用了vertical-align:middle;li是块级元素。
(by guorui-20120920)
根据上面的介绍我们可以推断这样使用是不正确的,vertical-align不继承,所以li中a的vertical-align都按照浏览器的默认来取值。因此表现也会有差异。
chrome下的表现:
IE9下的表现: IE7下的表现:
IE6下的表现:
从上面的图中可以看出,li中的vertical-align:middle(它本身就没有这个属性);并没有“遗传”给它里面的em和a(em和a被浏览器“潜规则”了)。
解决的办法是把vertical-align:middle;正确的写入到li中的em和a里面。
1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}2 #hot-sou ul li .num{width: 15px;height: 15px;margin-top: 3px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;}3 #hot-sou ul li .top{background-color: #F6872C;}4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;vertical-align: middle;}5 #hot-sou ul li .detail{width: 17px;height: 17px;line-height: 17px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;}6 #hot-sou ul li .detail:hover{background-position:0 -30px;}
更新代码后。。。
chrome下的表现:
IE9下的表现: IE7下的表现:
IE6下的表现:
通过上面的比较发现,还是没有对齐,但是这是代码中的边距、行高等影响了我们,现在我们把他们统一起来。
1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}2 #hot-sou ul li .num{width: 15px;height: 15px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;}3 #hot-sou ul li .top{background-color: #F6872C;}4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:15px;line-height:15px;white-space:nowrap;vertical-align: middle;}5 #hot-sou ul li .detail{width: 15px;height: 15px;line-height: 15px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;}6 #hot-sou ul li .detail:hover{background-position:0 -30px;}
更新代码后。。。
chrome下的表现: IE9下的表现:
IE7下的表现: IE6下的表现:
通过上面的比较,我们发现这样统一设置行高后,li中子元素的基线一致了,垂直居中也就获得了比较满意的结果。
总结:这次遇到的问题主要是vertical-align正确使用的问题,通过研究了解到如何规范使用,特别是有些属性在块级元素和行内元素使用上的差别。同时不同浏览器对于属性默认值的解析也是测试时需要注意的问题。如果开发中使用的是height与line-height相同的取值,会大大减少不同浏览器出现差别的情况,所以这也是开发中需要注意的地方。
- css中vertical-align(垂直对齐)的使用
- CSS vertical-align 垂直对齐 详析
- 垂直对齐vertical-align的一些认识
- 垂直对齐:vertical-align属性(转贴)
- 垂直对齐:vertical-align属性(转)
- css中vertical-align属性的使用
- css中vertical-align的使用图解
- 垂直对齐:vertical-align属性
- vertical-align 垂直对齐方式
- 基于vertical-align的表单元素垂直对齐方式研究
- 基于vertical-align的表单元素垂直对齐方式研究
- vertical-align 属性设置元素的垂直对齐方式。
- vertical-align表单元素垂直对齐(2)
- vertical-align表单元素垂直对齐(3)
- vertical-align表单元素垂直对齐(4)
- 10、vertical-align(附img垂直对齐案例)
- 7.4 垂直对齐:vertical-align属性
- vertical-align表单元素垂直对齐
- ZIP解压缩文件的工具类【支持多级目录|全】
- Add Two Numbers
- 腾讯视频解析接口
- Help Me with the Game
- c++程序员经典面试题(2)
- css中vertical-align(垂直对齐)的使用
- Requests: HTTP for Humans
- Address already in use: JVM_Bind
- uva 624 CD
- python socket 模块
- Java程序设计实用教程(第四版,叶贺亚)考试复习题-纯属个人思想
- 取反操作的陷阱及一个电阻的迷惑
- 剑指offer 面试题11
- 黑马程序员——Java基础---String类和基本数据类型包装类