位置: IT常识 - 正文

CSS实现文字垂直居中(css中文字垂直排列)

编辑:rootadmin
CSS实现文字垂直居中 一、问题描述: 当高度固定或不固定时,单行或多行文本难以实现垂直居中;二、解决方法:

推荐整理分享CSS实现文字垂直居中(css中文字垂直排列),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css文字垂直显示,css文字垂直对齐方式,css中文字垂直排列,css实现文字垂直居中,css实现文字垂直居中,css文字垂直居中怎么设置,css文字垂直显示,css实现文字垂直水平居中,内容如对您有帮助,希望把文章链接给更多的朋友!

1、使用line-height属性,将line-height设置与元素高度等高。

局限性:只适用于单行文本,局限性大。

代码:

.box {height: 100px;line-height: 100px;white-space: nowrap;}

2.padding:设置相等的上下padding值。

局限性:有高度限制时不能垂直居中。

代码:

.box{padding-top: 30px;padding-bottom: 30px;}

3.绝对定位居中:top:0; bottom:0; left:0; right:0; margin:auto;

元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值。(过度受限指的是同时设置top/bottom与height或者left/right与width。)

优点:支持响应式,只有这种方法在resize之后仍然垂直居中

缺点:使用绝对定位时元素必须有明确高度,没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条。IE浏览器不支持

代码:

.box{/*display:none;*/position:absolute;width:200px;height:200px;top:0;bottom:0;left:0;right:0;margin:auto;background:#000; resize:both;/*用于设置了所有除overflow为visible的元素*/overflow:auto; }

4.固定高度定位居中:top: 50%;height: 100px;margin-top: -50px;

优点:代码量少、浏览器兼容性高,支持ie6,ie7 缺点:不支持响应式(不能使用百分比、min/max-width),高度固定。

代码:

.parent {position: relative;}.child {position: absolute;top: 50%;height: 100px;margin-top: -50px; /*transform: translateY(-50%);*/}CSS实现文字垂直居中(css中文字垂直排列)

5.不固定高度定位居中:top:50%;left:50%;transform:translate(-50%, -50%)

缺点:不支持响应式(不能使用百分比、min/max-width)

代码:

.parent {position: relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

6.table-cell方式居中:dispaly:table;display:table-cell;vertical-align:middle;

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。

原理:利用表布局特点,vertical-align设置为middle后,单元格中内容中间与所在行中间对齐。

优点:支持任意内容的可变高度、支持响应式布局

缺点: 每一个需要垂直居中的元素都会需要加上额外标签(需要table、table-cell两个额外元素);

IE浏览器不支持

代码:

.father{height:200px; display:table; }.son{border:1px solid #000; width:760px;vertical-align:middle;display:table-cell; /*cell垂直居中,如果外层div不为table则tablecell须有高度*/ }

7.弹性盒式布局居中:display: flex;align-items:center;

优点:真正的垂直居中布局

缺点:ie11才开始支持弹性布局

代码:

.box{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display: -webkit-flex;display:flex; -webkit-align-items:center;align-items:center;-webkit-justify-content: center;justify-content: center;}

总结

1、只有单行文本时,可以将line-height设置与元素高度等高

2、外层div与内层div高度均固定时,可以使用设置相等的上下padding值;

3、当高度固定时,可以采用固定高度定位居中:top: 50%;height: 100px;margin-top: -50px;此方法对IE浏览器支持较好;

4、当高度不固定时,可以采用弹性盒式布局居中:display: flex;align-items:center;此方法操作简单,但ie11才开始支持弹性布局;或者采用table-cell方式居中:dispaly:table;display:table-cell;vertical-align:middle;此方法支持任意内容的可变高度,但操作繁琐,并且IE8以上的浏览器才支持;

本文链接地址:https://www.jiuchutong.com/zhishi/300113.html 转载请保留说明!

上一篇:智慧工厂云边协同:如何设计质量预警平台(智慧工厂协同管控下载)

下一篇:使用nodejs写接口(nodejs写后端接口)

  • 工资中代扣款是什么
  • 2021年专项附加扣除必须要确认吗
  • 基本账户可以转移吗
  • 个人专项扣除需要扣税吗
  • 行政事业单位计提折旧起始日
  • 税务机关和自然人属于平等主体吗
  • 2021年度全年一次性计税
  • 天猫最新提现技术
  • 职工教育经费能结转几年
  • 无偿使用房屋
  • 暂时性差异乘以税率
  • 企业接受捐赠的账务处理
  • 接受土地使用权作为投资属于什么凭证
  • 教育费附加计费单位
  • 以旧换新的金子划算吗
  • 出口转内销补交关税
  • 装修公司能开增值发票吗
  • 企业将现金借给员工
  • 公司股权转让应纳税额怎么算
  • 发票纳税人识别号错了能重新开吗
  • 发票对方已认证怎么冲红
  • 成品油电子普通发票开错了
  • 职工教育经费取得证件之后补助多少钱
  • 不同业务的进项税额抵扣
  • 结转应交增值税会计科目
  • vivo手机可以安装鸿蒙
  • 代开专票名称没有填写可以报销吗
  • 企业所得税申报错误怎么更改
  • 物业公司的水电工工作职责
  • 关闭固定在任务栏的功能
  • 成本核算怎么核算
  • 文件夹正在使用,操作无法完成
  • 事业单位工会会员费如何计算
  • 虎刺梅怎么养殖视频
  • 圆顶亭效果图
  • thinkphp框架入门
  • 西部大开发税收优惠政策是什么时候开始的?
  • 增值税纳税申报表在哪里查询
  • php使用什么开发工具
  • thinkphp如何连接数据库
  • 公司的归属权
  • 农民专业合作社连续几年未从事经营活动吊销营业执照
  • 跨年度的利息收入怎么做账
  • 存货都有什么科目
  • 收到的赠品怎么做分录
  • mysql如何打开使用
  • 差旅补助要计入成本吗
  • 什么是电子承诺
  • db2 -952
  • 开一家公司的具体步骤
  • 处置公司车辆收据怎么写
  • 扫码开票软件
  • 购货方发生退货的会计分录
  • 国有企业取得的土地建设职工住宅
  • 公路工程投标保证金
  • 管理费用费用占收入的多少
  • 旅行社的代订机票产品能报销吗
  • sqlserver查看磁盘大小
  • sql server的使用方法
  • mysql数据库备份与恢复的常用方法有几种
  • 数据库更新数据
  • sql server 2000中的安全性包含
  • win8怎么卸载应用程序
  • ubuntu zen3
  • win7系统玩暗黑2怎样全屏
  • windows对高分屏怎么这么差
  • windows 10各版本
  • win7系统安装程序无法启动
  • win8 远程桌面
  • 持久化存储数据的方式
  • bootstrap怎么学
  • linux进程管理命令使用
  • vue如何进行组件化开发
  • 噩梦 gd
  • jquery设置iframe的src
  • 动态表单的设计与实现
  • 出口汇率以什么为准
  • 运输装卸费属于增值税价外费用吗
  • 发票机如何打印文件
  • 18个税种已立法数量
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设