所属专栏:前端只因变凤凰之路
作者简介:rchjr——五带信管菜只因一枚
前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
文章简介:本文介绍CSS如何让单行文字垂直居中。知识学习内容来自b站的 @黑马程序员 的视频
先看一个案例了解什么是单行文字垂直居中
如上图,健康 儿童二字在一行中的高度很明显是贴到顶部了,而我们想要的效果应该是这样
那么具体该如何实现上述效果呢?其实方法很简单,只需要将行高等于它所在的盒子高度即可。当然这里我们使用了元素显示的转换,即让a标签转换为块元素而不是行内元素。下面给出前后对比的代码
第一种代码
Document
手机 电话卡
电视 盒子
笔记本 平板
出行 穿戴
智能 路由器
健康 儿童
耳机音响
第二种代码
Document
手机 电话卡
电视 盒子
笔记本 平板
出行 穿戴
智能 路由器
健康 儿童
耳机音响
以上就是如何让单行文字垂直居中的小技巧啦~