资讯专栏INFORMATION COLUMN

CSS实现多行文本垂直居中

novo / 406人阅读

摘要:最近在做项目时,遇到了如下样式需求即实现多行文本垂直居中。单行文本垂直居中方法简单父元素高度即可多行文本垂直居中父元素高度不固定使用样式解决即使上下相等父元素高度固定,假设结构如下所示解决方法

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

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

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

单行文本垂直居中

  方法简单:line-height(=父元素高度即可)

多行文本垂直居中

父元素高度不固定

使用padding样式解决(即使上下padding相等)

父元素高度固定,假设dom结构如下所示

解决方法:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113514.html

相关文章

  • CSS实现多行文本垂直居中

    摘要:最近在做项目时,遇到了如下样式需求即实现多行文本垂直居中。单行文本垂直居中方法简单父元素高度即可多行文本垂直居中父元素高度不固定使用样式解决即使上下相等父元素高度固定,假设结构如下所示解决方法 最近在做项目时,遇到了如下样式需求:showImg(https://segmentfault.com/img/bVbd8Lm?w=418&h=184); 即实现多行文本垂直居中。 分析:文本垂直...

    shiyang6017 评论0 收藏0
  • CSS居中完全指南——构建CSS居中决策树

    摘要:但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

    cc17 评论0 收藏0
  • CSS居中完全指南——构建CSS居中决策树

    摘要:但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

    AlienZHOU 评论0 收藏0
  • CSS实现元素垂直居中

    摘要:实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。三父元素高度确定的多行文本多行文本,图片,块级元素皆属于这种情况,对此的垂直居中主要有两种方法。插入对要垂直居中的元素外插入包括标签,同时设置。 CSS实现元素垂直居中 对元素的垂直居中针对于单行元素和多行元素将分情况讨论。 一、父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 h...

    RobinTang 评论0 收藏0
  • CSS实现元素垂直居中

    摘要:实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。三父元素高度确定的多行文本多行文本,图片,块级元素皆属于这种情况,对此的垂直居中主要有两种方法。插入对要垂直居中的元素外插入包括标签,同时设置。 CSS实现元素垂直居中 对元素的垂直居中针对于单行元素和多行元素将分情况讨论。 一、父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 h...

    joywek 评论0 收藏0

发表评论

0条评论

novo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<