css之 vertical-align用法详解

目录

• 基本知识
• 默认例子
• 1、baseline 基线对齐
• 2、上标 super 和 下标 sub
• • 2.1 sub
  • 2.2 super
• 3、top 和 bottom
• • 3.1 top
  • 3.2 bottom
• 4、text-top 和 text-bottom
• • 4.1 text-top
  • 4.2 text-bottom
• 5、middle 中线对齐
• 6、% 百分比
• 7、具体的值

基本知识

vertical-align 属性设置元素的垂直对齐方式。
css中的vertical-align 属性只能用于 行内元素 和 置换元素（例如 图像和表单输入框） ，此属性不继承。

接下来我们用例子去分析这些值的意思及产生的效果：

首先我们先看一张图，文字的顶线、中线、基线，基线是字母x的下边缘

默认例子