CSS如何让单行文字垂直居中

所属专栏:前端只因变凤凰之路
作者简介:rchjr——五带信管菜只因一枚
前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
文章简介:本文介绍CSS如何让单行文字垂直居中。知识学习内容来自b站的 @黑马程序员 的视频

先看一个案例了解什么是单行文字垂直居中

CSS如何让单行文字垂直居中_第1张图片

如上图,健康 儿童二字在一行中的高度很明显是贴到顶部了,而我们想要的效果应该是这样

CSS如何让单行文字垂直居中_第2张图片

那么具体该如何实现上述效果呢?其实方法很简单,只需要将行高等于它所在的盒子高度即可。当然这里我们使用了元素显示的转换,即让a标签转换为块元素而不是行内元素。下面给出前后对比的代码

第一种代码





    
    
    
    Document
    



    手机 电话卡
    电视 盒子
    笔记本 平板
    出行 穿戴
    智能 路由器
    健康 儿童
    耳机音响


第二种代码





    
    
    
    Document
    



    手机 电话卡
    电视 盒子
    笔记本 平板
    出行 穿戴
    智能 路由器
    健康 儿童
    耳机音响


以上就是如何让单行文字垂直居中的小技巧啦~

你可能感兴趣的:(前端只因变凤凰之路,css3,前端,css,css让单行文字垂直居中,单行文字垂直居中)