十九、CSS 布局之元素垂直对齐方式

浏览器 文字类型 元素排版中，存在用于对齐的基线，一般情况下，默认是基线对齐，这就会产生一些元素对不齐、有缝隙之类的问题，面对这些问题，我们可以用垂直对齐方式来解决。

垂直对齐方式

我们在设置图文样式的时候，可以发现，当图片和文字在一行中显示时，其实它们的底部是不对齐的，对于这类问题，可以用 垂直对齐 方式来解决。

垂直对齐方式可以解决 行内 / 行内块 元素的垂直对齐问题，其属性名是 vertical-align，它有 4 个属性值：

baseline ：基线对齐，默认值
top ：顶部对齐
middle ：中部对齐
bottom ：底部对齐

项目中 vertical-align 可以解决的问题

（1）文本框和表单按钮无法对齐问题

可以看到下例中，搜索按钮稍微有点上移，与输入框没有对齐：

HTML 复制代码

  <body>
    <input type="text" />
    <input type="button" value="搜索" />
  </body>
  
      <style>
      input {
        height: 60px;
        box-sizing: border-box;
      }
    </style>

在上例基础上，给元素设置垂直对齐方式：中部对齐

HTML 复制代码

  <body>
    <input type="text" />
    <input type="button" value="搜索" />
  </body>
  
    <style>
      input {
        height: 60px;
        box-sizing: border-box;
        vertical-align: bottom;
      }
    </style>

（2）input 系列和 img 图片无法对齐问题

HTML 复制代码

  <body>
    <img src="./beijing1.jpeg" alt="">
    <input type="text" />
  </body>
  
   <style>
      input {
        height: 60px;
        box-sizing: border-box;
      }
      img{
        width: 120px;
        height: 120px;
      }
    </style>

给 img 标签设置垂直对齐：以底部垂直为例

HTML 复制代码

  <body>
    <img src="./beijing1.jpeg" alt="">
    <input type="text" />
  </body>

    <style>
      input {
        height: 60px;
        box-sizing: border-box;
      }
      img{
        width: 120px;
        height: 120px;
        vertical-align: bottom;
      }
    </style>

（3）div 中的文本框无法贴顶问题

HTML 复制代码

    <style>
      div {
        width: 240px;
        height: 80px;
        background-color: rgb(51, 242, 30);
      }
    </style>

  <body>
    <div>
      <input type="text" />
    </div>
  </body>

给输入框设置垂直对齐方式：顶部对齐

HTML 复制代码

    <style>
      div {
        width: 240px;
        height: 80px;
        background-color: rgb(51, 242, 30);
      }
      input{
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" />
    </div>
  </body>

（4）div 不设置高度，由图片撑开，此时图片标签下面会存在额外间隙问题

HTML 复制代码

    <style>
      div {
        width: 240px;
        background-color: rgb(51, 242, 30);
      }
      img{
       width: 100px;
       height: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景">
    </div>
  </body>

给图片设置垂直对齐方式：中间对齐

HTML 复制代码

    <style>
      div {
        width: 240px;
        background-color: rgb(51, 242, 30);
      }
      img{
        vertical-align: middle;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景">
    </div>
  </body>

浏览器会把行内标签和行内块标签当作文字处理，默认是基线对齐，对于上面的示例，还可以将图片标签转换成块级标签来实现，效果相同：

（5）使用行内高让图片标签居中问题

HTML 复制代码

    <style>
      div {
        width: 240px;
        height: 200px;
        line-height: 200px;
        background-color: rgb(51, 242, 30);
      }
      img {
        width: 100px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景" />
    </div>
  </body>

给图片设置垂直对齐方式：中间对齐

HTML 复制代码

    <style>
      div {
        width: 240px;
        height: 200px;
        line-height: 200px;
        background-color: rgb(51, 242, 30);
      }
      img {
        vertical-align: middle;
        width: 100px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景" />
    </div>
  </body>

（6）水平、垂直都居中

HTML 复制代码

    <style>
      div {
        text-align: center;
        width: 240px;
        height: 200px;
        line-height: 200px;
        background-color: rgb(51, 242, 30);
      }
      img {
        vertical-align: middle;
        width: 100px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./beijing1.jpeg" alt="背景" />
    </div>
  </body>