用vertical-aline：middle实现行内元素、块级元素、多行文本垂直居中

在逃小屁王

于 2024-10-04 14:24:48 发布

阅读量145

点赞数 5

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_56473118/article/details/142697885

版权

前言

在前端中，经常需要让元素居中，CSS也提供了很多的居中技术。在我的学习过程中，我了解到了一个很神奇的属性vertical-aline（行内元素垂直对齐方式），发现vertical-aline：middle不仅可以实现行内元素垂直居中，还可以实现块级元素和多行文本垂直居中。这篇文章就大致的总结了一下我了解到的关于vertical-aline：middle的应用。

在展开说明之前，我们先了解一下在MDN当中对vertical-aline属性应用环境的描述：

如果大家对这两句话不是很理解，可以先接着往下看，然后再返回来看这两句话，或许你就理解了。

单行行内元素垂直对齐

应用场景：使头像和用户名垂直对齐

语法：把vertical-aline：middle添加到高度最高的元素身上

示例代码：

<!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>
        div {
            border: 2px solid red;
        }

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

        span {
            font-weight: 600;
            font-size: 16px;
        }
    </style>
</head>

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

</html>

效果：

多行文本垂直居中

line-height 和 vertical-aline 的区别：line-height只能使单行文本垂直居中，vertical-aline可以使多行文本垂直居中。

语法：

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

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .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;
            /* 表格单元内容垂直居中 */
        }
    </style>
</head>

<body>
    <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>
</body>

</html>

效果：

块级元素垂直居中

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

示例代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			display: table-cell;
			vertical-align: middle;
		}

		.child {
			width: 100px;
			height: 100px;
			background-color: grey;
		}
	</style>
</head>

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

</html>

效果：