vertical-align 属性应用

最新推荐文章于 2021-11-21 16:22:41 发布

安澜仙王

最新推荐文章于 2021-11-21 16:22:41 发布

阅读量368

点赞数 1

分类专栏： # CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/sinat_28317385/article/details/119983114

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

说明

CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐
官方解释:用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：

vertical-align:baseline | top | middle | bottom

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				vertical-align: middle;
			}
			textarea {
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<img src="image/img.jpg"/> pink老师
		<br >
		<textarea cols="30" rows="10"></textarea> pink老师
	</body>
</html>

在这里插入图片描述

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。
此时可以给图片、表单这些行内块元素的vertical-align 属性设置为middle 就可以让文字和图片垂直居中对齐了。

解决图片底部默认空白缝隙问题

bug：图片底册会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				border: 2px solid #0072C6;
			}
		</style>
	</head>
	<body>
		<div><img src="image/ldh.jpg" alt=""/></div>
	</body>
</html>

在这里插入图片描述
主要解决方法有两种：
1,给图片添加vertical-align:top | middle | bottom等。(提倡使用的)
2,把图片转换为块级元素display:block;

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				border: 2px solid #0072C6;
			}
			
			img {
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div><img src="image/ldh.jpg" alt=""/></div>
	</body>
</html>