[CSS] vertical-align

原文地址:

http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

1. 首先关于数值,见下面的示例:

.test{vertical-align:-2px;}

我的理解为,元素相对于基线向下偏移两像素,这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。这个没有什么好说的。

2. 再者关于百分数值,百分值与数值,以我的眼光看去,代表了不同的思想,以及心态。前者代表着灵活,自由与开放,后者有严谨,精确,安稳之意。CSS中支持百分值的属性还不少,例如width/height,line-height,font-size,这里的vertical-align属性也是其一。提到百分值,必然牵扯到相对于那个属性(或值),例如宽度百分比都是相对于父块状元素的宽度值的,font-size的百分值是相对于向外的第一含有font-size属性的层的font-size大小而言的,而这里的vertical-align,有些不拘一格,是相对于此标签继承的line-height值决定的。例如,如下示例代码:

.test{vertical-align:-10%;}

假设这里的.test的标签继承的行高是20px,则这里的vertical-align:-10%所代表的实际值是:-10% * 20 = 2(像素)。不过事情没有这么简单,CSS中的line-height是个非常精深的属性,建议您看看我之前写的这篇文章:css行高line-height的一些深入理解及应用,所以遇到像IE6/IE7这样吃三鹿奶粉长大的浏览器肯定会出点篓子的。什么篓子呢,就是“IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。”您可以看看我处理的以小数值line-height继承的vertical-align百分比显示对比图[参展对象:IE6(观众扔鸡蛋)和Firefox3.6(美女送鲜花)]:

如果您现在使用的就是IE6或是IE7或是IE6/7内核的浏览器,同时相对这个bug有所见识,您可以狠狠地点击这里:IE6/7 vertical-align百分值与line-height小数值bug

要是您不想见到让您生气的IE下的糟糕表现,您可以狠狠地点击这里:非小数line-height修复demo

3. 最后关于其他属性,像是bottom,middle等,我是懒得说什么了,为何?可以看看下面这张兼容性表:

兼容性(vertical-align)

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Full Full Full Buggy

这是老外前辈整出的vertical-align兼容性表,虽然我不清楚Opera浏览器一栏的full是个什么意思,但是”buggy”知道,就是臭虫成群,bug成堆的意思,我想,做过简单研究的都会注意到不同浏览器下的差异确实明显。

三、为什么我的vertical-align属性不起作用?

只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。所以,类似下面的代码就不会起作用:

span{vertical-align:middle;}
div{vertical-align:middle;}虽然vertical-align属性只会在inline-block水平的元素上期作用,但是其影响到的元素涉及到inline属性的元素,这里千万记住,inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用,而是受制于整个line box的变化而不得不变化的,这个后面会较为深入的分析。具体请看:http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html

四、text-top
<div style="line-height:200px; border:1px solid #34538b;">
    <span style="font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;">大大的文字</span>后面是静止的文字。
</div>
text-top
    aligns the top of the box with the top of the parent element’s font

翻译过来就是:让当前box的顶部与父元素的文字的顶部对齐

所以我们只要恰准了box的顶部以及父元素文字的顶部,就可以知道这类表现是怎么回事,哪种表现更加符合其本身的定义。

1、现代浏览器表现

当前box的顶部:黄色box顶部

父元素的文字的顶部 : 灰色文字的顶部,因为父元素的line-height:200px;所以文字撑开的高度是200px;

2、ie家族表现

当前box的顶部:当前元素文字的顶部即大文字的顶部。

父元素的文字的顶部 : 灰色文字的顶部,

ie下:忽略vertical-align的定义,vertical-align:text-top就是两段文字之间的对齐,span文字的顶部与后面裸文字的顶部对齐

IE8下高度为227像素,这多出来的27像素是60像素的文字下移与后面文字顶部对齐的距离,这与现代浏览器下的父标签撑开表现是有些类似的,IE8浏览器可以说是有改进的,但是在理解父元素的顶部上似乎与现代浏览器有偏差,不知在IE9浏览器下会是怎样的一个表现。一起拭目以待。

 

 
时间: 2024-09-29 22:45:21

[CSS] vertical-align的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

CSS ?? ??? ?? (??? ??!) Vertical Centering with CSS

? ??? ????? ???? ???? vertical-align ??? ??? ? ??? ? ? ? ????. (???? vertical-align ??? ?? ?????? ??? ??? ????.) ?? ??: ?? “???? ????? ? ???” ?? ???? ????. ???? ??? ? ?? ??? ???? ????? ???? ??? ???. ??? ??? ??? ?? ?? ?? ?? ?? ??, ???? ???? ??? ??. (?

CSS垂直居中完美有用实例

<!DOCTYPE HTML> <html> <head> <meta meta charset="utf-8"> <title>CSS垂直居中</title> <style type="text/css" media="all"> body{color:black;background-color:white;padding:50px;font-size: 12

CSS实现完美垂直居中

之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 table 布局一样.不过最近有人问了几个例子,看来对此的需求还不少.现在就把我经验拿出来分享一下,希望大家鼓鼓掌. 首先,要有一个概念:凡是 table 布局可以实现的,CSS 一定可以实现.CSS 可以实现的,table 未必能做到. 现在来几个例子: 一.单行内容的居中只考虑单行是最简单的,无论是否

[译] 如何调试CSS的跨浏览器样式bug

http://www.cnblogs.com/newyorker/archive/2013/01/22/2870682.html 原文 http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/ 作者为YAHOO前端工程师. 首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些“好的”

纯div+css制作的弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

纯css实现的下拉导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>老Y天下-网页特效-导航菜单-漂亮的二级下

DIV+CSS制作的水平三级横向弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css 居中,中央

在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必须知道element的height & width. 2.vertical align middle 在element 里,只要知道父层的高,子层就能通过vertical align middle移动到中间,当然,父层同时也要有text align center,或者子层margin auto; d

CSS垂直居中完美实用实例

<!DOCTYPE HTML> <html> <head> <meta meta charset="utf-8"> <title>CSS垂直居中</title> <style type="text/css" media="all"> body{color:black;background-color:white;padding:50px;font-size: 12