最新下载
热门教程
- 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而言的，所以这一点必须要理解，它的垂直对齐方式和右边的文字没有半毛钱关系。
相关文章
- 云星穹铁道权益升级怎么玩 云崩铁权益升级活动介绍 12-03
- 以闪亮之名山中绘梦怎么玩 以闪亮之名滢然花梦套装活动介绍 12-03
- 以闪亮之名绿野梦歌礼包怎么样 以闪亮之名绿野梦歌拍照礼包介绍 12-03
- 光遇12.6有什么更新 光遇12月6日更新内容介绍 12-03
- 伍六七暗影交锋测试资格怎么获得 伍六七暗影交锋内测资格获取方法 12-03
- 无限暖暖晶莹诗集怎么样 12-03