CSS布局中的vertical-align问题

在使用vertical-align:middle;的时候经常会出现不起作用的情况。今天来梳理一下vertical-align:middle;用法。在看文章之前你可以去看下张大神的关于line-height和vertical-align的文章CSS深入理解vertical-align和line-height的基友关系。
首先要注意的是只有行内元素和行内块级元素属性才能生效。
做一下测试。

.wrap{
    width: 500px;
    height: 100px;
    background: #201C29;
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: 0 0 5rem #100e17;
}
.box1{
        background: #FF3D57;
    display: block;
    vertical-align: middle;
}
.box1a{
    width: 100px;
    height: 50px;
}
.box1b{
        width: 80px;
    height: 50px;
}
.box2{
    background: #FFCB00;
    display: inline;
    vertical-align: middle;
}
.box2a{
    font-size: 50px;
}
.box3{
    background: #00D546;
    display: inline-block;
    vertical-align: middle;
}
.box3a{
        width: 100px;
    height: 80px;
}
.box3b{
    width: 100px;
    height: 40px;
}

<div class="wrap">
    <div class="box1 box1a">块级元素</div>
    <div class="box1 box1b">块级元素</div>
</div>
<div class="wrap">
    <div class="box2 box2a">行内元素</div>
    <div class="box2 box2b">行内元素</div>
</div>
<div class="wrap">
    <div class="box3 box3a">行内块级元素</div>
    <div class="box3 box3b">行内块级元素</div>
</div>

复制代码到浏览器中可以看到如下的结果。

img.png
可以看到行内元素和行内块级元素的vertical-align生效了，两个元素垂直居中对齐了。块级元素由于会独占一行，所以自然是不可用了。
仔细观察发现行内元素和行内块级元素虽然在垂直方向上对齐了，但是并没有和他们的父级垂直居中对齐。
img2.png
此时我们只要给父级设置和自己高度一样的line-height就可以了，也就是给wrap这个元素设置line-height: 30px;
img3.png
这样子级元素就可以在垂直方向上和父级元素对齐了。
那我们是不是每次必须给父级设置line-height呢？当然不是，这要视布局的具体情况而定。

1. 如果父级的高度是不固定的，那我们是不需要设置父级line-height属性的，因为子级之间会垂直居中对齐，父级的高度会被撑开，由高度最大的自己决定。
2. 如果父级的高度是固定的，那么可以设置父级的line-height等于它的高度。还有一种方法就是让其中一个子级的高度正好等于父级的高度。那这样岂不是还要写一个多余的元素，我们可以用伪类来处理。

.wrap::before{
  content: '',
  display: inline-block;
  height: 100%;
  width: 1px;
  vertical-align: middle;
}

这样这个多余的元素就不会影响你的布局了。

3. 如果父级室友固定高度的，那子级的高度千万不能超过父级的高度，如果大于的话，那子级元素就不会以父级垂直中心线对齐了，而是会以超过父级高度的那个子级垂直中心线。
   我们用一张图片来演示一下吧。
   img4.png
   这里图片要设置vertical-align: middle;，图片的高度此时是大于父级高度的，所有的子级现在都是和图片垂直对齐的，不再是和父级垂直对齐。

补充一点东西：当我们在一个标签中放置一张图片时，父级高度会被撑出来一部分

img5.png
解决方法可以参考上面的链接。其中一种方法是设置图片属性vertical-align: middle;，但是如果图片的高度过小，这个方法是不起作用的，我自己的测试结果是chrome和firefox浏览器都是26px，也就是说如果图片的高度小于26px，这个大小是受到父级的字体大小影响的，此时vertical-align: middle;是不能解决问题的，这时可以设置父级的font-size: 0;