关于vertical-align应用

与valign的对比

vertical-align在小雨手册上的解释是：设置或检索对象内容的垂直对其方式。我觉得不太理解的是vertical-align所在的分类是“属性/文本”

O3noBLOG特别强调的是vertical-align和valign的不同，的确vertical-align应用最多的应该是在td内，控制内部对象位置，和td的valign属性极其相似。

valign共有四个参数：top, baseline, bottom, middle，相对而言vertical-align也有相同的属性值，以下是对td控制对比：

使用vertical-align:top;来避免td默认的valign="middle"是很好的选择，当然也可以使用vertical-align:middle;来对td控制，但对div肯定也是无效的。

Demo http://www.rexsong.com/blog/attachments/200512/14_141246_valign.htm

与align的对比

按照w3的提示，使用vertical-align使用在inline对象上，比如对img的控制，于是又和img的align属性类似。

使用align="absmiddle"控制img绝对居中的时候，也可以尝试使用vertical-align:middle;，做个对比看的更清楚：

所以真正的绝对居中还是align="absmiddle"，这是使用CSS不可替代的。

Demo http://www.rexsong.com/blog/attachments/200512/14_141444_align.htm

inline应用

用来决定inline对象的垂直位置，看两个例子：

小图：http://www.rexsong.com/blog/attachments/200512/14_142037_verticalalignmenttest.htm
大图：http://www.rexsong.com/blog/attachments/200512/14_142517_verticalalign.htm

Referrence
vertical-align不是valign http://blog.othree.net/log/2005/07/23/vertical_alignIsNotValign/
Vertical Alignment Test http://www.utoronto.ca/ian/books/style/chap4/fig4-15.html
vertical-align･････縦方向の揃え位置を指定する http://www.htmq.com/style/vertical-align.shtml

Forum
关于vertical-align应用 http://bbs.51js.com/viewthread.php?tid=50741

时间： 2024-08-29 14:25:04

关于vertical-align应用的相关文章

CSS属性Vertical Align基本使用方法

CSS有一个属性叫Vertical Align.当你第一次学习它的时候会有些困惑,因此我觉得我们可以通过它的用法来了解它.最基本的用法像这样: img{ vertical-align: middle; } 注意在这个应用案例中,它被应用到了img元素上.图片通常是行内元素,意味着它通常是和文字在一起的.但是到底"在一起"确切的是什么意思?这就是Vertical-align所要解决的. 有效值为:baseline,sub,super,top,text-top,middle,bottom,

5款纯div+css制作的弹出菜单(标准且无js)

css|js|标准|菜单 一.最基本的:二级dropdown弹出菜单<!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><

被遗忘的HTML元素

众所周知,制作网页所用到的最基本的语言HTML主要是由著名的W3C组织来制定标准的.但由于IE和NetScape之间都在为击败对手不断地研究新的网页技术而竞争,就产生了不少新的HTML元素.这些新的HTML元素,有的被W3C组织所认证,发展成为所有的浏览器必须支持的HTML标准元素.但有的却仍不被别的浏览器所接受.特别是对于目前最主流的浏览器-IE和NetScape,出于各种方面的原因,总是有一些元素不能得到二者共同的支持.在实际的网页制作过程中,为了能使页面在所有的浏览器中都能正常显示,这样的

完全CSS下拉菜单，只用CSS，纯CSS构筑！

核心提示:纯CSS构筑的下拉导航菜单! 看看CSS代码,要注意认真看,好好研究哦! <style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul

纯CSS制作下拉导航菜单实例代码

css|菜单|导航|下拉 <style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left;position:relat

纯CSS制作简洁的垂直网站导航条

css|导航 CSS代码 以下是引用片段:/* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif;  width:750px;  margin:0;  margin:50px 0; } /* remove the bullets and set the margin and padding

话说绝对居中

 什么叫绝对居中?就是说容器到屏幕左右上下四个方向都有间距,并且随屏幕大小缩放相对不变或者等比例调整,始终居屏幕中间. 绝对居中也有两种情况,容器的绝对大小和相对大小. 同时有很多方法可以实现,总结起来大致如下: 1,利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小.(非标准)<table width="100%" height="100%" bor

国外转过来十个最好的CSS hacks

author: Dejan Cancarevic  come from:http://stylizedweb.com/2008/02/14/10-best-css-hacks/ 转自国外网站,本想翻译成中文,但是细看文章实在是简单,如果看不懂这个,我想也就没必要继续做前端了. If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And

CSS+DIV设计实例：纯CSS制作下拉导航菜单

css|菜单|设计|下拉 纯CSS制作的下拉导航菜单-这是一个老外的作品,基本上全是用CSS+HTML写出来的,值得大家学习 以下是引用片段:<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;lis

IE6中ExtJS Grid表头下拉菜单错乱问题

今天使用ExtJS 2.2.1进行页面开发时,发现在IE6中的Grid的表头显示异常 ,图标和文字发生错乱,如图: 在Firefox和chrome显示都是正常的,很是奇怪,难道是版本问题? 将2.2版本和2.2.1版本的ext-all.css进行了比较,发现有两处不一样,改回 2.2版本后一切正常: 找到.x-menu a.x-menu-item{display:block;line- height:16px;padding:3px 21px 3px 27px; 修改成.x-menu a.x-m