CSS（六）：单行文字垂直居中

css没有给我们提供文字垂直居中的代码,这里我们可以使用一个小技巧来实现.

解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

 <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>单行文字垂直居中</title>
		<style>
			div {
				width: 200px;
				height: 40px;
				background-color: purple;
				line-height: 40px;
				color: #fff;
			}
		</style>
	</head>
 
	<body>
		<div>我要居中</div>
	</body>
</html>

posted @ 2022-06-08 10:56 pure3417 阅读(39) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS（十九）：盒子阴影、文字阴影

· CSS（十二）：案例3-五彩导航栏

· CSS设置单行文字水平垂直居中

· css水平垂直居中的方法

· css 文字垂直居中

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？

公告

昵称： pure3417
园龄： 3年11个月
粉丝： 31
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

pure3417

CSS（六）：单行文字垂直居中

公告

搜索

积分与排名

随笔分类 (150)

个人blog网址

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>单行文字垂直居中</title>
	<style>
	div {
	width: 200px;
	height: 40px;
	background-color: purple;
	line-height: 40px;
	color: #fff;
	}
	</style>
	</head>

	<body>
	<div>我要居中</div>
	</body>
	</html>