vertical-align使用场景:多个行盒在垂直方向上的对齐

_处女座程序员的日常

已于 2022-04-22 08:25:47 修改

阅读量297

点赞数 1

分类专栏：前端 css html 文章标签： javascript 前端 es

于 2022-04-01 08:01:14 首次发布

本文链接：https://blog.csdn.net/qq_42931285/article/details/123888432

版权

前端同时被 3 个专栏收录

372 篇文章 13 订阅

订阅专栏

css

113 篇文章 0 订阅

订阅专栏

html

46 篇文章 1 订阅

订阅专栏

本文介绍了CSS中如何使用vertical-align属性解决不同元素之间的垂直对齐问题，包括input与button的对齐、图片与文字的底部对齐、输入框的顶部对齐以及图片的底部和中部对齐。通过调整vertical-align的值，可以有效地实现元素间的精准对齐。

摘要由CSDN通过智能技术生成

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
如下图所示：有些部分是在基线外边的。由于有的字大，有的字小，所以会出现垂直方向对不起现象。浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象
在这里插入图片描述
可以将左边大图想象成一个大字，右边大字想象成一个小字。此时垂直方向没有对齐。

可以用vertical-align来实现对齐。

在这里插入图片描述
案例一：input和button没有对齐：

解决方式：加vertical-align。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
    input {
      height: 50px;
      box-sizing: border-box;

      vertical-align: middle;
    }

  </style>
</head>
<body>
  <input type="text"><input type="button" value="搜索">
</body>
</html>

在这里插入图片描述
案例二：图片和inpu底部没居中对齐

解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   img {
     vertical-align: middle;
   }
  </style>
</head>
<body>
  <img src="../images/1.jpg" alt=""><input type="text">
</body>
</html>

在这里插入图片描述
案例三：input没有贴顶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    input {
      /* vertical-align: middle; */
      vertical-align: top;
    }

  </style>
</head>
<body>
  <div class="father">
    <input type="text">
  </div>
</body>
</html>

实现顶对齐
在这里插入图片描述
案例四：子元素img没贴底

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    img {
      /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
      /* vertical-align: middle; */
      display: block;// 不再是行（内）块元素，不当做文字处理
    }

  </style>
</head>
<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>
</html>

在这里插入图片描述
案例五：子元素img没居中

在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      line-height: 600px;
    }

   
  </style>
</head>
<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>

注：上面写了line-height等于height，但是没实现图片居中。

改善代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      line-height: 600px;
      text-align: center;
    }

    img {
      vertical-align: middle;//关键语句
    }
  </style>
</head>
<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>
</html>