[分享]css两个标签上下对其

在 CSS 中，有两个常用的属性可以让元素上下对其，那就是 display 和 verticalalign 属性。首先，让我们来了解一下 display 属性。这个属性可以控制元素生成的框类型：dis...

在 CSS 中，有两个常用的属性可以让元素上下对其，那就是

display

和

vertical-align

属性。

首先，让我们来了解一下

display

属性。这个属性可以控制元素生成的框类型：

display: inline; 

这个属性值表示元素会生成一个内联框，如果元素是行元素，那么这个内联框就是和文本一样大小的。如果元素是块级元素，那么这个内联框会按照元素的 width 和 height 进行填充。

display: inline-block; 

这个属性值表示元素会生成一个内联块，内联块的大小同样会按照元素指定的 width 和 height 进行填充。不同于内联元素的是，内联块可以设置 margin 和 padding 属性。

这里顺便提一句，还有 inline-table 属性，这个属性表示元素生成一个内联表格。

display: block; 

这个属性值表示元素会生成一个块级框，块级框会完全填充父元素的宽度，并且默认会从新行开始。

知道了这个，接下来就是

vertical-align

属性，这个属性可以让元素在垂直方向上对其。这个属性只适用于内联元素和单元格元素。

vertical-align: baseline; 

这个属性值会使元素基线对其。基线是内联元素中的一个概念，可以参考一下下面这张图。

vertical-align: top; 

这个属性值会使元素顶部对其。

vertical-align: bottom; 

这个属性值会使元素底部对其。

除此之外还有 middle, sub, super 等属性值，这里就不再赘述了。