vertical-align:middle/top/bottom/baseline，文本框无法贴顶，表单和按钮对齐，表单和图片对齐

1.知道有哪些参数

top

middle

baseline

bottom

2. 知道基线

3. 使用场景：行内和行内块元素垂直对齐的问题。

4.具体场景

4.1 作用1：能够实现表单和button按钮的对齐

如下，顶部没有对齐

    <input type="text" placeholder="请输入内容">
    <button>点击提交</button>

        input {
            vertical-align: top;
        } // 在这里给input设置效果更好

4.2 作用2：实现图片和表单的对齐

原本不对齐

假设目的是图片和表单都顶部对齐，建议给图片设置top值，
 

        input {
            vertical-align: top;
        }

假设目的是图片和表单都底部对齐，建议给表单设置bottom值

注意：在这里无需记忆这个，手动去分别调试即可

4.3 作用3：div中的文本框无法贴顶的问题

 给input设置top值，就能够贴顶。（老实说，还是有一点点的缝隙，但是比上面的情况已经小很多了。如果有小伙伴有更好的办法，欢迎指正。）

        input {
            vertical-align: top;
        }

4.4 作用4：div不设置高度，里面有img标签，img标签撑开div，下面有缝隙

 这里是给img设置bottom值，就能够去除缝隙

    <div>
        <img src="./1111.jpg" alt="">
    </div>

        img {
            width: 50px;
            vertical-align: bottom;
        }

        div {
            border: 1px solid #000;
        }

4.5 作用5：想让有高度和宽度的盒子里面的图片垂直居中

设置line-height的值等于盒子高度的值，发现图片并没有在正中间，而是在偏上面一点的位置。这个时候给img加一个vertical: middle值即可实现，处于正中央。下图左边是没有加middle右边是修改后加了的。

        img {
            width: 50px;
            vertical-align: middle;
        }

        div {
            width: 200px;
            height: 200px;
            line-height: 200px;
            border: 1px solid #000;
        }

4.6 作用6： 文字和图片的对齐问题

 如下设置

        img {
            width: 200px;
            vertical-align: bottom;
        }

文字的底布和图片的底部能够对齐了

结尾：

学习id： 201903090124-8

现在是大三学生，学习到了前后端交互的node.js阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。