css垂直对齐css中vertical-align属性（垂直对齐）的使⽤
说明
这两天写个页⾯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代码：　
复制代码
代码如下:
<ul class="gclearfix">
<li>
<em class="num top">1</em>
<a href="#">我这段长长的⽂字只是来测试⾏内⾼度的的的的的的的的的的。。。。。。。。。。。。。</a>
<a class="detail" href="#"></a>
</li>
</ul>
相关样式表css代码：
复制代码
代码如下:
#hot-sou ul li{overflow: hidden;padding: 2px 0 3px;vertical-align: middle;}
#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;}
#hot-sou ul li .top{background-color: #F6872C;}
#hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;}
#hot-sou ul li .detail{width: 17px;height: 17px;line-height:
17px;background:url(p0.qhimg/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⾥⾯。
复制代码
代码如下:
#hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}
#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;}
#hot-sou ul li .top{background-color: #F6872C;}
#hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-sp
ace:nowrap;vertical-align: middle;}
#hot-sou ul li .detail{width: 17px;height: 17px;line-height:
17px;background:url(p0.qhimg/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;}
#hot-sou ul li .detail:hover{background-position:0 -30px;}
更新代码后。。。css实现垂直水平居中
chrome下的表现：
  IE9下的表现：              IE7下的表现：
  IE6下的表现：
通过上⾯的⽐较发现，还是没有对齐，但是这是代码中的边距、⾏⾼等影响了我们，现在我们把他们统⼀起来。
复制代码
代码如下:
#hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}
#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;}
#hot-sou ul li .top{background-color: #F6872C;}
#hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:15px;line-heig
ht:15px;white-space:nowrap;vertical-align: middle;}
#hot-sou ul li .detail{width: 15px;height: 15px;line-height:
15px;background:url(p0.qhimg/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;}
#hot-sou ul li .detail:hover{background-position:0 -30px;}
更新代码后。。。
chrome下的表现：IE9下的表现：
  IE7下的表现：              IE6下的表现：
通过上⾯的⽐较，我们发现这样统⼀设置⾏⾼后，li中⼦元素的基线⼀致了，垂直居中也就获得了⽐较满意的结果。
总结：这次遇到的问题主要是vertical-align正确使⽤的问题，通过研究了解到如何规范使⽤，特别是有些属性在块级元素和⾏内元素使⽤上的差别。同时不同浏览器对于属性默认值的解析也是测试时需要注意的问题。如果开发中使⽤的是height与line-height相同的取值，会⼤⼤减少不同浏览器出现差别的情况，所以这也是开发中需要注意的地⽅。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。