前端学习之垂直对齐（vertical-align）

最新推荐文章于 2024-03-11 20:25:07 发布

Endless Daydream233

最新推荐文章于 2024-03-11 20:25:07 发布

阅读量7.6k

点赞数 17

分类专栏：前端学习基础记录文章标签： html css

本文链接：https://blog.csdn.net/gua222/article/details/106460113

版权

前端学习基础记录专栏收录该内容

57 篇文章 8 订阅

订阅专栏

vertical-align 垂直对齐

1.让带有宽度的块级元素水平居中对齐：margin:0 auto;
2.让文字水平居中对齐：text-align:center;
3.让块级元素垂直居中：子绝父相，子：top:50%;transform: translateY(-50%);/margin-top:-(子高度的一半) 或者使用后面的弹性布局在父元素中添加display: flex;align-items: center;
4.让文字垂直居中： line-height=父元素的高；

vertical-aligin: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

那么 vertical-aligin能很好解决所有垂直居中的问题吗。。nonono~

vertical-align 不影响块级元素中的内容对齐，它只针对行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。

复习一下：一个文字由如下四条线组成。而行高由上边框+下边框+文字内容组成。
在这里插入图片描述
而一张图片默认由基线对齐（即蓝色的那条base-line）如下图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
      <img src="img/lx/123.jpg" alt="">
      my name is 张三喵
	</div>
</body>
</html>

要想居中对齐的话，就可以设置vertical-align:middle：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			vertical-align: middle; //垂直居中对齐
		}
	</style>
</head>
<body>
	<div>
      <img src="img/lx/123.jpg" alt="">
      my name is 张三喵
	</div>
</body>

模式	单词
基线对齐：默认的是文字和图片基线对齐	vertical-align: baseline;
垂直居中：默认的是文字和图片基线对齐	vertical-align: middle;
顶部对齐：默认的是文字和图片基线对齐	vertical-align: top;

由此，我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字的基线对齐哦~

去除图片底侧空白缝隙

有个很重要的特性：图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。如下图：
在这里插入图片描述
解决办法：

给img 设置vertical:center|top|bottom等等。只要不要让img用默认的基线对齐(baseline)即可。

img{
			vertical-align: bottom; /* 底部对齐 */
			vertical-align: top; /* 顶部对齐 */
			vertical-align: middle; /* 居中对齐 */
		}

给img设置 display:block; 转为块级元素就不会存在这种问题了。