最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS中vertical-align垂直对齐属性介绍
时间:2014-09-04 编辑:简简单单 来源:一聚教程网
一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你用的是脑残的IE,请跳过此篇文章。
一、为什么我设置的vertical-align没用?
相信很多前端开发人员都遇到过这个问题,有的时候自己明明写了vertical-align属性值,但就是没效果,归其原因,是因为vertical-align是个比较奇葩的东西,想要让他起作用,就要投其所好。
我们知道css中display属性有三种inline/inline-block/block,在这里面,vertical-align只认识inline-block,也就是说只有给标签添加了display:inline-block属性,vertical-align才会起作用。
二、vertical-align设置的值到底是针对谁的?
vertical-align的值有很多:常见的有baseline(默认)、top(顶部对齐)、text-top(与文本顶部对齐)、middle(居中)、bottom(底部对齐)、text-bottom(与文本底部对齐)。
看下面这段代码:
代码如下 | 复制代码 |
这是一段文本
|
加上以后,span小点就跟右边的文字居中对齐了,当你不停的变换vertical-align的值时,你会发现span的垂直对齐方式对相对于它的父级div而言的,所以这一点必须要理解,它的垂直对齐方式和右边的文字没有半毛钱关系。
-
上一个: 解决ie浏览器不兼容浮动float的办法
-
下一个: CSS下水平居中和垂直居中例子
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26