前端学习笔记-CSS-行高

最新推荐文章于 2023-10-23 11:27:45 发布

Nanami Touko

最新推荐文章于 2023-10-23 11:27:45 发布

阅读量852

点赞数

分类专栏：前端学习-HTEML&CSS

本文链接：https://blog.csdn.net/qq_36434637/article/details/97113245

版权

前端学习-HTEML&CSS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

行高的测量

行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。

做法就是：文字的行高等于盒子的高度。

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

如果行高等 height 高度文字会垂直居中

如果行高大于高度文字会偏下

如果行高小于高度文字会偏上

练习：

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 
	上距离和下距离总是相等的，因此文字看上去是垂直居中的。
	如果行高 等   height 高度  文字会 垂直居中
	如果行高 大于 height高度   文字会  偏下 
	如果行高 小于 height高度   文字会  偏上 
	 -->
	<meta charset="UTF-8">
	<title>行高</title>
	<style>
		a{
			width: 120px;
			height: 58px;
			background-image: url(04尖叫导航栏/images/bg1.png);/*设置背景图片*/
			display: inline-block;/*修改a为行内块元素*/
			text-align: center;/*文字水平居中*/
			line-height: 50px;/*但由于图片存在下标，使用58px，看起来偏下，因此可手动调小px，使文字看起来处于居中位置*/
		}
	</style>
</head>
<body>
	<a href="#">导航栏</a>
	<a href="#">导航栏</a>
	<a href="#">导航栏</a>
	<a href="#">导航栏</a>
</body>
</html>

效果：

Nanami Touko

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记-CSS-行高

行高的测量行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。做法就是：文字的行高等于盒子的高度。上距离和下距离总是相等的，因此文字看上去是垂直居中的。如果行高等 height 高度文字会垂直居中如果行高大于高度文字会偏下如果行高小于高度文字会偏上练习：<!DOCTYPE html>&l...
复制链接

扫一扫