位置: IT常识 - 正文

前端技术中的几种居中方式(前端的基本知识)

编辑:rootadmin
前端技术中的几种居中方式 一、水平居中

推荐整理分享前端技术中的几种居中方式(前端的基本知识),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端主要,前端的基本知识,前端技术术语,前端技术中包含哪三种技术,前端技术的三大基础,前端涉及的技术,前端涉及的技术,前端涉及的技术,内容如对您有帮助,希望把文章链接给更多的朋友!

1、使用margin:0px auto可以使盒子水平居中,但要设置宽度。

2、在父元素中使用text-align:center可以将子元素设置水平居中,但子元素必须为行内元素或行内块元素。

3、使用绝对定位,父相子绝的原则,在子元素中设置left:50%和transform:translateX(-50%)。可以不设置宽高。

      这里的left:50%是将子元素的左边缘线紧贴在父元素的中线,transform:translateX(-50%)是将子元素向左移动其自身宽度的一半。

二、垂直居中前端技术中的几种居中方式(前端的基本知识)

1、使用绝对定位,父相子绝的原则,在子元素中设置top:50%和transform:translateY(-50%)。可以不设置宽高。

      这里的top:50%是将子元素的上边缘线紧贴在父元素的中线,transform:translateY(-50%)是将子元素向上移动其自身高度的一半。

2、将父元素设置为display:table-cell,并设置vertical-align: middle,要设置宽高。子元素要是行内元素或行内块元素。

3、要想使文字垂直居中,最简单的方式是将行高line-height的值设置为元素的高度一样的值。

三、水平垂直居中

1、使用绝对定位,父相子绝的原则,在子元素中设置left:50%;top:50%和transform:translateX(-50%) translateY(-50%)。可以不设置宽高。(推荐使用)

2、使用flex布局时,在父元素中设置display:flex; align-items: center; justify-content: center;可以使子元素水平垂直居中。

     align-items用于控制弹性盒的纵轴(即垂直方向)上的对齐方式,justify-content用于控制横轴(即水平方向)上的对齐方式。

3、将父元素设置为display:table-cell,并设置vertical-align: middle; text-align:center; 要设置宽高。子元素要是行内元素或行内块元素。

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

上一篇:k8s 部署nginx 实现集群统一配置,自动更新nginx.conf配置文件 总结(k8s部署ingress-nginx)

下一篇:axios 的使用(axios有哪些常用方法)

  • 生产车间维修费是制造费用还是管理费用
  • 公司能经营烟草公司吗
  • 砖厂开票员的工作流程
  • 发生销售折让时为什么不冲减成本
  • 酒店租金计入什么会计科目
  • 电信线路租用的手机
  • 税控盘抵税账务处理
  • 停工损失会计科目
  • 日用品增值税税率
  • 小规模纳税人免税会计分录
  • 利息收入要不要交增值税?
  • 开具发票时提示离线发票累计金额超限?教你如何处理
  • 什么情况下附加税减半
  • 注册资本印花税税目是什么
  • 展会展位费发票税率
  • 培训费和差旅费可以一起报嘛
  • 发票过期未认证怎么办
  • 供应商赠送的原材料怎么做分录
  • 笔记本最新windows
  • 计提跌价准备会影响利润吗
  • linux acl配置命令
  • macbookzen
  • linux的基础知识
  • php 面向对象
  • 承租人对经营租赁的会计处,怎么快速记住方法
  • 公司注销职工怎么办理
  • 为什么增值税最后有余额附加税没有
  • the模板引擎
  • 税务局关于免税资格的审核认定
  • 什么是工资薪金所得
  • php 图片
  • gpio口是什么意思?
  • etc发票计算抵扣
  • 维保服务的税率是多少
  • 请假扣款怎么做账
  • 有趣的html简单代码
  • vue watch和computed
  • [paper] lift,splat,shooting 论文浅析
  • 微信小程序基于什么框架
  • 借入资金用于生产经营
  • 暂估入库以及暂估的区别
  • python如何运行
  • 暂估价与发票价的区别
  • 网站的首页文件名是什么
  • Windows上PostgreSQL安装配置教程
  • 小规模纳税人的企业所得税怎么算
  • 综合单价税率调整如何结算
  • sql server干嘛的
  • sql server 新增字段
  • 企业进行股权转让前,必须先销什么户
  • 小规模纳税人附加税怎么算
  • 去年出口
  • 银行承兑汇票到期日后多久可以承兑
  • 客户退货,但不退货
  • 企业收到税务退回税金会计分录怎么写
  • 哪种飞机票可以抵扣进项税
  • 开红字发票必须要收回原发票并作废吗?
  • 开具其他发票收入填报异常
  • 成本核算的意义在于
  • 残保金计算人数1.02怎么计算
  • mysql5.7.32免安装教程
  • Linux/Mac MySQL忘记密码怎么办
  • win10开始菜单按重启键变成关机
  • 联想昭阳k41笔记本
  • win73d设置怎么设置
  • 苹果电脑怎么归类app
  • 原版windowsxp安装
  • win7系统回收站文件夹的位置
  • win10系统怎么设置屏幕保护
  • linux系统中限定系统口令的长度
  • 用wasfile.zip智能批量删除文件
  • C# list多字段排序sort
  • 用javascript写表单代码
  • android升级是什么意思
  • python和微信交互
  • jquery formbuilder
  • 定额发票是如何开具的
  • 税票开户银行怎么填写?
  • 酒店不给住怎么办
  • 白酒消费税怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设