CSS中使用vertical-align:middle使元素垂直居中的坑

    在CSS样式中，vertical-align 属性设置元素的垂直对齐方式，想必学过一个前端的人都知道这个东西，也知道怎么用。今天在做 项目的时候遇到一个坑，在这里做个记录。先简单说一下vertical-align 这个属性吧，根据查阅文档可以知道它有如下几个参数：baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
top：和本行位置最高元素对齐。
bottom：和本行位置最低元素对齐

        本文要讨论的就是其中middle的使用，我在做项目过程中，需要在input标签后加个<span>标签作为提示内容的显示，这两个标签都放在一个<div>块中，在将<span>标签style属性设置为vertical-align:middle 后，元素内容并没有垂直居中，在仔细查阅资料后终于找到了一些原因以及解决办法。

在W3C官方中对 vertical-align做了下面的解释：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
事实上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。如果把 vertical-align:middle 放到一个单元格元素，即table的td元素中，它的垂直居中显示是没任何问题的，因为它表示相对于改行的垂直高度居中显示。而在我设定的<div>块中并不只存在一行，因此它无法识别默认显示在顶部。

        为了解决这个问题，我找到了两种方法。一个是我们可以设置<span>元素style中的 line-heght 值为其父元素<div>的height值，这样 vertical-align:middle 就会使<span>元素内容垂直居中。   另外还有种方法，就是将要设置垂直居中的元素的父元素style属性添加 display:table-cell 将其作为单元格显示，这样使用 vertical-align:middle 也可以实现垂直居中。建议使用第一种方法，毕竟根据实际需要，我们一般使用<div>作为父元素其中不止一种子元素，使用单元格格式会增加一些 限制，出现一些意想不到的问题。 

最后

以上就是开朗鸭子为你收集整理的CSS中使用vertical-align:middle使元素垂直居中的坑的全部内容，希望文章能够帮你解决CSS中使用vertical-align:middle使元素垂直居中的坑所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。