二、CSS图文对齐

最新推荐文章于 2023-11-15 17:05:48 发布

黑日里不灭的light

最新推荐文章于 2023-11-15 17:05:48 发布

阅读量537

点赞数 1

分类专栏： # CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_46765649/article/details/127145009

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

博客探讨了在CSS中图片和文字无法对齐的问题，原因是文字从基线以下的“底线”开始，而图片则从基线开始。通过设置元素的`vertical-align: middle;`属性，可以实现图片和文字的垂直居中对齐。示例代码展示了如何在HTML中应用此解决方案。

摘要由CSDN通过智能技术生成

一、困境

在这里插入图片描述

解释：如图现在设置的图片和文字大小都为16px，但是为什么没有对齐这个问题就是由于文字从以基线为标准（但并非从基线开始，而是从“底线”开始（这个和vertical-align:bottom;没有关系）），图片是从基线开始的。
在这里插入图片描述

二、解决

在这里插入图片描述

解释：图片和文字都设置vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.bg{
			display: inline-block;
			background-image: url("./image/baidu/旋转.png");
			background-size: contain;
			height: 16px;
			width: 16px;
			background-repeat: no-repeat;
			border: 0.1px burlywood solid;
			/* 关键 */
			vertical-align: middle; 
		}
		.sp{
			/* 关键 */
			vertical-align: middle; 
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="bg"></div>
	<span class="sp">我</span>
</body>
</html>