css中vertical-align属性的初步了解

一月清辉

已于 2023-02-07 11:56:42 修改

阅读量431

点赞数

CC 4.0 BY-SA版权

分类专栏： css布局文章标签： css javascript 前端

于 2019-01-17 23:04:30 首次发布

本文链接：https://blog.youkuaiyun.com/yiyueqinghui/article/details/86532787

css布局专栏收录该内容

42 篇文章

订阅专栏

本文详细解析了CSS中vertical-align属性的工作原理，重点解释了它如何实现元素间的垂直居中对齐，并非相对于父元素居中。通过示例代码展示了如何在不同高度的元素间应用该属性达到居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vertical-align起作用的情况

重点重点：vertical-align 垂直居中的原理：
并不是相对父元素的垂直居中，而是指相对父元素内的所有子元素来说垂直居中(路线对齐)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.parent{
				width:400px;
				height:400px;
				border:1px solid #000;
				text-align: center;
			}
			.red{
				width:100px;
				height:100px;
				background: red;
				vertical-align: middle;
			}
			.green{
				width:100px;
				height:200px;
				background: green;
				vertical-align: middle;
			}
			.blue{
				width:100px;
				height:150px;
				background: blue;
				vertical-align: middle;
			}
			.inline{
				display:inline-block;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="red inline"></div>
			<div class="green inline"></div>
			<div class="blue inline"></div>
		</div>
	</body>
</html>

显示效果如下：
在这里插入图片描述

所以vertical-align=middle所有元素相互是居中对齐的，这里这些元素并未在整个外框里垂直居中。基于此，设想vertical-align=middle如果有一个元素的高度是100%的话，是不是就真正在外框里垂直居中了。

vertical-align只能用于 行内元素

//适用于
inline:    <img>,<span>,<strong>,<em>.......
inline-block:   <input>(IE8+),<button><IE8+>....
table-cell:   <td>

vertical-align:不可继承

vertical-align 取值

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

具体有关基线以及每个属性是详解，
参考链接：https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral

inline元素水平排列，在水平或垂直方向上会产生空隙的解决办法

垂直空隙（方法：vertical-align:middle）
水平空隙
水平产生空隙的原因：代码的换行；
解决办法：注释去掉换行，或者将代码调成一行显示

<ul>
        <li class="box"></li><!-- 注释去空格
     --><li class="box"></li>
        <li class="box"></li>
    </ul>

在这里插入图片描述