vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐

最新推荐文章于 2022-11-12 15:53:39 发布

岁月可贵

最新推荐文章于 2022-11-12 15:53:39 发布

阅读量736

点赞数 4

分类专栏： css笔记文章标签： html5 css css3

本文链接：https://blog.csdn.net/weixin_44659458/article/details/109286486

版权

css笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、vertical-align的使用

经常用于设置图片或者表单【行内块级元素】和文字垂直对齐

vertical-align属性值

basesline:默认，元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶部对齐
middle:把此元素放置在父元素的中部
bottom:把元素的顶部与行中最低的元素的顶部对齐

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

问题引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>解决图片底部默认空白缝隙问题</title>
		<style type="text/css">
			.container{
				border: 1px solid yellow;
			}
			img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="img/图片.jpg"/>
		</div>
	</body>
</html>

在这里插入图片描述
此时，我们可以看到，图片底部与父容器之间有一段空隙。原因：行内块级元素会和文字的基线对齐。

解决方法
（1）给图片添加 vertical-align middle | top | bottom
（2）把图片转换成块级元素 display:block;
在这里插入图片描述

俩者比较，我个人更喜欢前者，因为后者一旦设置成块级元素时，该元素是独占一行，不利于布局。

三、文本垂直方向居中对齐

问题引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vertical-align</title>
		<style>
			.container{
				width: 300px;
				height: 200px;
				background-color: #f5f5f5;
			}
			p{
				display: inline-block;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="img/车锁.png"/>
			<p>车锁</p>
		</div>
	</body>
</html>

在这里插入图片描述

此时，如果我们要实现，文字和图片垂直方向居中时，我们应该使用vertical-align，对图片元素增加属性vertical-align：middle;即可实现。

在这里插入图片描述

欢迎访问我的个人博客

岁月可贵

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐

一、vertical-align的使用       经常用于设置图片或者表单【行内块级元素】和文字垂直对齐vertical-align属性值basesline:默认，元素放置在父元素的基线上top：把元素的顶端与行中最高元素的顶部对齐middle:把此元素放置在父元素的中部bottom:把元素的顶部与行中最低的元素的顶部对齐二、解决图片底部默认空白缝隙问题     &n
复制链接

扫一扫