vertical-align

  • 版本:CSS1/2
  • 媒体:视觉
vertical-align属性在CSS文本中是比较常用的,本文将带你深入理解vertical-align属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上vertical-align的演示案例,希望能够对你有所帮助。

vertical-align的具体语法

vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

默认值baseline

适用于:内联及 table-cell 元素

继承性:有

动画性:当值为 <length>

计算值:指定值

vertical-align的取值介绍

baseline:
将支持valign特性的对象的内容与基线对齐
sub:
垂直对齐文本的下标
super:
垂直对齐文本的上标
top:
将支持valign特性的对象的内容与对象顶端对齐
text-top:
将支持valign特性的对象的文本与对象顶端对齐
middle:
将支持valign特性的对象的内容与对象中部对齐
bottom:
将支持valign特性的对象的文本与对象底端对齐
text-bottom:
将支持valign特性的对象的文本与对象顶端对齐
<percentage>
用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
<length>
用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

vertical-align的使用说明

设置或检索内联元素在行框内的垂直对其方式。
  • 对应的脚本特性为verticalAlign

vertical-align的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0 1.0 1.0 1.0 4.0

vertical-align的完整演示案例

5. css文本效果

css1/css25.1 text-indent(文本缩进)语法:​text-indent:|​取值::用长度值指定文本的缩进。可以为负值。:用百分比指定文本的缩进。可以为负值。​注...2016年3月13日

CSS动态实现文本框清除按钮的隐藏与显示

但是长得略微粗糙了点,设计师同学接受不了。貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框。如下CSS:...2015年6月27日

width: 300px;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;测试浏览器: IE6/7/8/9...2014年8月27日

div+css文本垂直居中

作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素...4月28日

-webkit-line-clamp:3;overflow:hidden;效果如图:适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;注...2016年11月28日

1、TextColor颜色值属性被用来设置文字的颜色,颜色值通过CSS最经常指定:十六进制:#FF0000一个RGB值:RGB(255,0,0)颜色名称...2016年10月18日

CSS文本:属性描述color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本...2015年1月31日

在CSS3详解的上一篇中我们讲到了transform的具体属性和用法,今天我们看一个相对简单的text-shadow。CSS3text-shadow是什么?text-shadow的含义是:文本的阴影...2015年3月3日

charset=gb2312"/>MB5Uul{width:300px;margin:50pxauto...2014年9月12日

div多行文本固定高度的垂直居中vertical-align属性只会对拥有valign特性的(x)HTML标签起作用,在css中有一个display属性可以模拟...2016年8月31日

在使用渐变时,需要配置后备background-color或者background-image属性,供不支持css3渐变的浏览器使用,css3渐变需要编码4个样式的声明...2014年10月28日

CSS技能篇: 环形文本

有时候有一些比较短的文本需要遵循环形路径显示。这种时候,CSS就弃我们而去了。没有任何CSS属性或功能可以完成这个效果...2016年7月21日

允许在字内换行word-break:normal;}强制英文单词断行div{word-break:break-all;}3.总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了...2015年1月8日

标题文件有50个汉字,而我们的列表可能只有300px的宽度。假如用标题截取函数,则标题不是完整的,假如我们用CSS样式text-overflow:ellipsis,输出的标题是完整的...2015年5月14日

平时常见的css文字属性有哪些??font-size:像素,字体大小,font-family:字体名称,设置字体名称font-style...2016年4月28日

发布于2014-10-30 17:44:06CSS文本:一、缩进文本1、text-indent属性:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素...2014年10月30日

==color:#ffffff; opacity : 0.8;text-align : right;}CSS的渐变:CSS是“渐进性增强”...2014年10月31日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册