最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS中vertical-align垂直对齐属性介绍
时间：2022-06-25 10:06:27 编辑：袖梨 来源：一聚教程网
一向以来，我对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而言的，所以这一点必须要理解，它的垂直对齐方式和右边的文字没有半毛钱关系。
相关文章
- 《绝区零》伊芙琳培养材料汇总 01-24
- 《无限暖暖》1.2春节兑换码一览 01-24
- 《网上国网》查询阶梯档位方法 01-24
- 《蛋仔派对》神游贺岁盲盒获取方法 01-24
- 《炉石传说》星际联动盗贼卡组玩法介绍 01-24
- 皮革珊瑚属于珊瑚中的 01-24