🌟 所属专栏：前端只因变凤凰之路🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS如何让单行文字垂直居中。知识学习内容来自b站的 @黑马程序员 的视频
先看一个案例了解什么是单行文字垂直居中
如上图，健康 儿童二字在一行中的高度很明显是贴到顶部了，而我们想要的效果应该是这样
那么具体该如何实现上述效果呢？其实方法很简单，只需要将行高等于它所在的盒子高度即可。当然这里我们使用了元素显示的转换，即让a标签转换为块元素而不是行内元素。下面给出前后对比的代码
第一种代码
<!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>/* 1 把链接a转换为块元素 */a {display: block;width: 230px;height: 40px;text-decoration: none;color: white;background-color: #55585a;text-indent: 2em;font-size: 14px;/* line-height: 40px; */}a:hover {background-color: #ff6700;}</style></head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机音响</a></body></html>
第二种代码
<!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>/* 1 把链接a转换为块元素 */a {display: block;width: 230px;height: 40px;text-decoration: none;color: white;background-color: #55585a;text-indent: 2em;font-size: 14px;line-height: 40px;}a:hover {background-color: #ff6700;}</style></head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机音响</a></body></html>
以上就是如何让单行文字垂直居中的小技巧啦~
