位置: 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写后端接口)

  • 银行委托贷款上征信吗
  • 软件企业会计科目分类
  • 生育津贴是否需要纳税
  • 飞机票抵扣进项税怎么计算民航发展基金
  • 注册公司工贸和商贸区别
  • 安装费人工费有什么不一样
  • 实际上缴税费总额怎么算
  • 公司委托收款该怎么办
  • 营改增后如何计算税金
  • 车辆保险代交车船使用税会计分录怎么写?
  • 甲供工程选择适用简易计税方法后,36个月
  • 代发工资超过5000 可以不交税吗
  • 大型超市税收分析报告
  • 公司亏损转让股权
  • 税友服务费能否抵扣
  • 职工福利费扣除标准2022
  • 出口企业应交税费是负数怎么解释
  • 发票作废了还能查验吗
  • 常见的审计调整事项
  • 产权交易费用
  • 补缴以前年度税款
  • 财付通转出的钱能还回来吗
  • 基金预算收入核算的内容包括
  • 公司 期货投资
  • 采购医药费差价会计分录
  • 预提成本的会计处理
  • 调整以前年度所得税汇算清缴报表,在哪调减虚增的成本
  • 损益类科目的借方是增加还是减少
  • 不能抵扣的费用
  • 外账的结转成本是什么
  • 财务人员如何审核合同
  • 前端页面默认字体
  • PHP:finfo_set_flags()的用法_fileinfo函数
  • 非居民企业股权转让特殊性税务处理
  • 新准则有哪些
  • centos安装php环境
  • php用户登录界面
  • react 路由参数
  • 为什么那么多人考公务员
  • php怎么上传图片并保存到数据库
  • basename $1
  • 小规模升级一般纳税人后可以降为小规模吗
  • 外购商品转为自用固定资产,进项税
  • 帝国cms调用api接口
  • php门户cms
  • 数字黑洞有哪些
  • python读取不到文件怎么办
  • 小规模纳税人免税额度是多少
  • 航空电子客票行程单是发票吗
  • 企业所得税退税有风险吗
  • 分公司是否能开劳务发票
  • 出口不报关账务处理
  • 捐赠支出税前扣除比例
  • 企业税负是否包含增值税
  • 企业每月营业额达多少需要交税
  • 税控盘费用进什么科目
  • 企业收到加盟费怎么开发票
  • 促销有哪几个方面
  • 研发部门房租计入研发费吗
  • 发票认证申报期是什么时候
  • 企业支付宝能买东西吗
  • 预付工资怎么入账
  • windosxp无法启动
  • 苹果今日报价
  • win7安装sqlserver2005失败
  • 苹果官网
  • win10怎么更改磁盘空间分配
  • win8怎么改文件格式
  • html&js+前端
  • js中的filter方法和map方法
  • CSS List Grid Layout 图片垂直居中
  • vue打包页面空白
  • jqueryanimate动画
  • 深入python3
  • 工具类的作用
  • Python常见格式化字符串方法小结【百分号与format方法】
  • 工程项目管理费计入什么科目
  • 怎样看业务序号
  • 浙江省税务局领导介绍
  • 税务稽查时长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设