字体图标真正居中方法

最新推荐文章于 2023-07-08 10:39:41 发布

BangD

最新推荐文章于 2023-07-08 10:39:41 发布

阅读量217

点赞数

分类专栏： css 文章标签： html 前端 css

本文链接：https://blog.csdn.net/BangD/article/details/126277798

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文字和字体图表连写，即使设置了行高等于高度，图片也会稍微往下沉一些，下边这种方法可以实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.test-view {
				border: 1px solid black;
				height: 60px;
				line-height: 60px;
			}
			.test-view .dot {
				display: inline-block;
				width: 20px;
				height: 20px;
				vertical-align: middle;
				background: url(images/security.png);
				background-size: 100% 100%;
			}
			.test-view .text {
				vertical-align: middle;
				font-size: 20px;
			}
			.test-view.case3 {
				font-size: 0;
			}
			
		</style>
	</head>
	<body>
		<div class="test-view case3">
			<span class="text">查看详情</span>
			<i class="dot"></i>
		</div>
		<!-- <img src="images/security.png" alt=""> -->
	</body>
</html>

示例字体图标