学习笔记之 vertical-align

原创 2015年07月11日 10:45:37

vertical-align:

值:baseline | sub | super | top | text-top | middle |bottom | text-bottom | <percentage> | <length> | inherit

初始值:baseline

应用于:行内元素和表单元格

继承性:无

百分数:相对于元素的line-height值

计算值:对于百分数和长度值,为绝对长度,否者,根据指定确定

说明:应用到表单元格时,只能识别baseline、top 、middle、bottom等值

baseline:要求一个元素的基线与其父元素的基线对齐。如果一个垂直元素没有基线,也就是说,如果这是一个图像或表单输入元素或其他替换元素。那么该元素的底端与父元素的基线对齐。(但实验证明,表单输入元素并不是底端对齐父元素基线,而是比如对于input的type为text来说,对齐基线的是里边的文字基线)

2.父元素的基线:父元素中没有改变vertical-align的大多数元素的基线(一般在同一直线上,不论元素有多高

sub;使该院书变成下表,这意味着其基线(替换元素为低端)会相对于父元素的基线降低,但并没有规定降低的距离。

super:讲元素的基线(或替换元素的底端),相对于父元素的基线升高,同样地,升高的距离取决于用户代理。

bottom:将元素行内框的底端与行框的底端对齐。

top:将行内框的顶端与行框的顶端对齐。

middle:往往(当并不总是)应用于图像,会把行内框的重点与父元素基线上方0,5ex处的一个点对齐。(ex:小写字母x的高度,与font-size有关)

percentage:把元素的基线(或替换元素的底端)相对于父元素的基线升高或降低指定的量(你指定的百分数要计算未该元素line-height的百分数,而不是父元素的百分数)。正百分数数值使该元素升高,负百分数数值使其降低)

length:把一个元素升高或降低指定的距离。

!!!注意:垂直对齐的文本并不会成为另一行的一部分,并且所有的垂直对齐的元素都影响行高。行框:高度包含最高行内框的顶端和最低行内框的底端。因此行框也包括因垂直对齐上升或下降的行内框。

1、元素的基线:

(图的来源http://www.jb51.net/web/6476.html)



3. 替换和不可替换元素

a) 替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。

(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如: <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 不可替换元素 (x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。

例如: <p>段落的内容</p> 段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

css学习笔记之vertical-align

/* 只是记录下前端学习过程中的笔记 有错误 麻烦各位大佬一定指正啊 别让我这个渣渣 保留错误的想法 跪谢了 :)  先说好喔  新手看我的笔记大概会被我搞晕 我是按自己思路写的 网上有很多大佬好的...
  • cmd1994
  • cmd1994
  • 2017年07月20日 15:08
  • 93

vertical-align属性学习记录

CSS vertical-align 属性

利用vertical-align:middle实现行内元素的水平垂直居中对齐

最终实现效果为实现行内元素的水平、垂直居中对齐,效果图如下:    接下来为实现代码:  复制代码 代码如下:       利用vertical-alig...

CSS属性:vertical-align:middle,设置为什么无效!

最近,在学习CSS中,每次对一个页面进行排版的时候,总是需要对文字居中,每次在div里面设置text-align和vertical-algin两个属性就会以为他会居中! 废话不多说了!直接上代码! 图...

我对CSS vertical-align的一些理解与认识(一)

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 地址:http://www.zhangxinxu.com/wordpress/?p=813 一、关于今天,...

怎么应用vertical-align,才能生效?

vertical-align 的使用  以前总是想要一些元素垂直居中对齐,经常用line-height,可是对于图片来说,line-height的表现并不理想(非常不理想)可看我的文章:line-h...

简单说 CSS的vertical-align (一)

说明vertical-align属性,是CSS属性中一个比较重要的属性,也是比较不好理解的一个。 我们今天就来说说它。 解释先来看看他的定义。 定义和用法 vertical-ali...
  • FE_dev
  • FE_dev
  • 2017年08月02日 20:43
  • 373

实现垂直居中 和 vertical-align

关于vertical: 1、定义和用法 vertical-align 属性设置该元素相对于所在行基线的垂直对齐方式。 只对行内元素(a,span,img等)的基线相对于该元素所在行的基线的垂直对齐...

我对CSS vertical-align的一些理解与认识(一)

css

vertical-align表单元素垂直对齐(3)

经过以上折腾,我得出了跟wheatlee相同的结论,就是,各种浏览器之间对这个问题的处理貌似没有任何规律。并且,似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3...
  • xjinza
  • xjinza
  • 2011年08月06日 11:34
  • 222
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习笔记之 vertical-align
举报原因:
原因补充:

(最多只允许输入30个字)