深扒【vertical-aline】垂直对齐方式——图片文字垂直居中对齐的好帮手-CSDN博客

该属性貌似大部分人都没有使用过，但其实它在使**图像和文字垂直对齐**上是一个非常不错的选择！不仅如此，像前端中比较常用的**line-height**行高，它只能使**单行文本**垂直居中，而vertical-aline不仅能使单行文本垂直居中，还可以使**多行文本**和**块级元素**垂直居中。

要素过多，接下来这篇文章将带领大家深扒vertical-aline，掌握它的实际用法！

深扒vertical-aline

首先，

CSS vertical-align 属性用来指定行内（inline）、行内区块（inline-block）、表格单元格（table-cell）盒子的垂直对齐方式。

以上是在MDN中给出的解释，其中**指定**二字就明确指出了，它仅对以上元素生效，对**块级元素**不生效。

其次，

★vertical-align 属性可被用于两种上下文:

使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐行文本内的图片
垂直对齐表格单元格的内容

关键字的介绍

上文首先给出了vertical-aline的基本概念，以及根据概念提出的注意点；其次，给出了vertical-aline的两种实际应用。

一个属性的实际应用，是非常核心且重要的，也是我们学习一个属性的最终目的。但我为什么从一开始就摆出来了呢？是因为，

两种上下文对应两种不同的关键字：1. 行内元素的值；2. 表格单元格的值。这里的不同不是值的不同，而是在不同应用下的对齐方式的不同。

接下来主要介绍baseline、top、bottom和middle四个关键字，其中baseline是默认关键字。

行内元素的值

baseline

baseline默认值指的是以**基线**对齐。什么是基线呢？

★基线，就是你在写英语时的四线三格中的最底下的那一条线

那么引入一下，不知道你有没有发现**图像（img）**好像格外的不一样，在没有设任何padding内边距时，它不像块级元素（block）一样底边紧挨父级边框，它的下边总会有**空白**存在，就像图一那样，

在图片旁边放了xxx等英文字母，图中画了一条线，这条线就是那条基线，可以清楚的看到空白的产生是因为图片的下边缘是和基线对齐的。

其实，不止是图像（img），我发现这是**行内块元素（inline-block）**的一个特性。

图一：

top

那么，当行内块元素设置了top值又是怎样对齐的呢？

使元素的顶部与整行的顶部对齐

像图二这样：

bottom

同样，设置bottom值呢？

使元素的底部与整行的底部对齐

像图三这样：

middle

middle居中，是最最最常用的一个关键字！

它的对齐方式是，

使元素的中心线与该行中心线对齐

图四中展示，也就是图像的中心线与X字母的中线对齐：

示例代码：

HTML：

 <img src="./R-C.jpg" alt="" width="300px" height="168px">
   <!-- 字母作对比 -->
 <span>xxxxxxjjjjjj</span>
 <div></div>

CSS：

 div {
      width: 300px;
      height: 300px;
      background-color: rgb(165, 42, 63);
    }

    span {
      background-color: blueviolet;
    }

    img {
      vertical-align: middle;
    }

★消除空白

话又说回来，怎么消除空白呢？

其实根据上面对关键字的介绍，也应该发现了，除设置默认值baseline外，设置任意关键字都可以消除空白。

总结：

有两种方法，①图像display：block转为块级元素；②图像添加vertical-aline属性，除默认属性值（baseline）外，设置任意属性值均可以消除空白。

表格单元格的值

效果图

示例代码

HTML：

 <table>
    <tr>
      <td class="baseline">baseline</td>
      <td class="top">top</td>
      <td class="middle">middle</td>
      <td class="bottom">bottom</td>
    </tr>
  </table>

CSS：

 table {
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      height: 50px;
    }

    table,
    td {
      border: 1px solid black;
    }

    td {
      padding: 0.5em;
      font-family: monospace;
    }
    .bottom {
      vertical-align: bottom;
    }

    .baseline {
      vertical-align: baseline;
    }

    .top {
      vertical-align: top;
    }

    .middle {
      vertical-align: middle;
    }

★实际应用

行内盒的垂直对齐

头像与用户名垂直居中对齐

注意语法，vertical-aline写到图像（行内盒）上

效果图：

示例代码：

HTML：

<div>
    <img src="./20220123222213_2899a.jpeg" alt="">
    <span>我是用户名</span>
</div>

CSS：

 div {
            border: 2px solid red;
        }

        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            vertical-align: middle;
        }

        span {
            font-weight: 600;
            font-size: 16px;
        }

表格单元格中的垂直对齐

多行文本垂直居中

语法：

先给父级元素设置display：table属性，使元素作为表格来显示（类似<table>）
再给子级元素设置display：table-cell属性，使元素作为表格单元格显示（类似<td>和<th>）
最后给子级元素（表格单元格）设置vertical-aline：middle属性，实现元素垂直居中

效果图：

示例代码：

HTML：

<div class="parent">
        <div class="child">
            Diligence is the mother of success.<br>
            Work makes the workman.<br>
            Diligence is the mother of success.<br>
            Work makes the workman.<br>
            Diligence is the mother of success.<br>
            Work makes the workman.<br>
            Diligence is the mother of success.<br>
            Work makes the workman.<br>
        </div>
    </div>

CSS：

.parent {
            display: table;
            /* 父元素成为表格（类似<table>）*/
            width: 400px;
            height: 400px;
            text-align: center;
            border: 1px solid red;
            margin: 0 auto;
        }

        .child {
            display: table-cell;
            /*子元素成为表格单元格（类似 <td> 和 <th>）*/
            height: 200px;
            background: yellow;
            vertical-align: middle;
            /* 表格单元内容垂直居中 */
        }

块级元素垂直居中

语法：父级元素设置display：table-cell和vertical-aline：middle属性

注意语法，和多行文本不一样，该例子是要让父级元素变为表格单元格（display：table-cell），使其内部的块级元素垂直居中对齐。

效果图：

示例代码：

HTML：

<div class="father">
		<div class="child"></div>
	</div>

CSS：

.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			display: table-cell;
			vertical-align: middle;
		}

		.child {
			width: 100px;
			height: 100px;
			background-color: grey;
		}