博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS实现多行文本垂直居中
阅读量:5997 次
发布时间:2019-06-20

本文共 166 字,大约阅读时间需要 1 分钟。

最近在做项目时,遇到了如下样式需求:

clipboard.png

即实现多行文本垂直居中。

分析:文本垂直居中分为两种,即单行文本和多行文本。

  1. 单行文本垂直居中

    方法简单:line-height(=父元素高度即可)
  2. 多行文本垂直居中

  • 父元素高度不固定

    使用padding样式解决(即使上下padding相等)
  • 父元素高度固定,假设dom结构如下所示

clipboard.png

解决方法:

clipboard.png

转载地址:http://swhlx.baihongyu.com/

你可能感兴趣的文章
hadoop 开发环境搭建
查看>>
[在职软件工程]数据挖掘-概念与技术
查看>>
Oracle动态SQL语句
查看>>
RabbitMQ消息队列(五):Routing 消息路由 2[原]
查看>>
Debug 和 Release 编译方式的本质区别
查看>>
Performing a thread dump in Linux or Windows--reference
查看>>
c#实现无标题栏窗口的拖动
查看>>
深入理解spring中的各种注解(转)
查看>>
BootStrap安装
查看>>
ng-class的使用
查看>>
设计模式之建造者模式
查看>>
关于华为交换机bpdu enable. ntdp enable. ndp enable解析
查看>>
当你学不进去的时候,试试“普瑞马法则”
查看>>
编写DLL
查看>>
2015年第12本(英文第8本):the Old Man and the Sea 老人与海
查看>>
推荐系统中常用算法 以及优点缺点对比
查看>>
JSTL实现int数据的类型的长度
查看>>
cocos2d-x v3.2环境配置(现在3.x版本号可以配置该)
查看>>
InputStream中read()与read(byte[] b)
查看>>
第3章 结构之法——电话号码对应英语单词
查看>>