位置: IT常识 - 正文

元素垂直居中的五种方式(元素垂直水平居中方式)

编辑:rootadmin
元素垂直居中的五种方式 元素内容垂直居中

推荐整理分享元素垂直居中的五种方式(元素垂直水平居中方式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:元素垂直居中对齐,元素垂直水平居中方式,如何让一个元素垂直水平居中,实现元素垂直居中,元素垂直居中对齐,元素垂直居中的方法,元素垂直居中对齐,元素垂直居中的方式,内容如对您有帮助,希望把文章链接给更多的朋友!

本文介绍: 元素标签内的内容垂直居中有两种思路, 第一种思路是将元素内容利用行高或者内边距padding属性设置 第二种思路是子盒子在父盒子中垂直居中,利用flex布局或者position定位方式

五种方式实现元素内容垂直居中第一种:利用 line-height 属性利用元素行高属性第二种:利用元素上下内边距(padding属性)第三种:利用flex布局第四种:使用position: fixed 定位方式实现在浏览器窗口居中对齐方式第五种:使用相对定位与绝对定位实现子盒子在父盒子上居中对齐第一种:利用 line-height 属性利用元素行高属性line-height 将元素里的内容在元素中垂直居中,对行内元素无效。line-height 只对行内块元素和块元素有效。若是想在行内元素设置行高,需要将行内元素转换为行内块元素和块元素。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素内容垂直居中</title> <style> .item-1 { width: 300px; border: 1px solid skyblue; font-size: 14px; /* 元素没有设置高度,默认高度等于行高 */ line-height: 40px; } .item-2 { width: 300px; border: 1px solid skyblue; font-size: 14px; height: 35px; /* 垂直居中必须等于元素高度的值 35px */ line-height: 35px; } </style></head><body> <!-- 元素内垂直居中有两种: 第一种:利用元素行高属性line-height垂直居中,对行内元素无效,需要将行内元素转换为行内块元素或者块元素 注意: 1.如果元素没有设置高度,那么元素默认高度等于line-height的值,会将元素的高度撑开。 2.如果元素设置了高度,比如height: 35px;那么元素内容想要垂直居中,line-height的值必须等于元素的高度,line-height等于35px 3.若是内容要设置中间的偏下或者偏上,那么元素必须带高度,偏下设置行高大于高度的值即可,偏上设置行高小于高度即可 --> <div class="item-1">利用行高垂直居中 item-1</div><br> <div class="item-2">利用行高垂直居中 item-2</div></body></html>

注意: 1.如果元素没有设置高度,那么元素默认高度等于line-height的值,会将元素的高度撑开。 2.如果元素设置了高度,比如height: 35px;那么元素内容想要垂直居中,line-height的值必须等于元素的高度,line-height等于35px 3.若是内容要设置中间的偏下或者偏上,那么元素必须带高度,偏下设置行高大于高度的值即可,偏上设置行高小于高度即可

第二种:利用元素上下内边距(padding属性)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素内容垂直居中</title> <style> .item-1 { width: 300px; font-size: 14px; border: 1px solid skyblue; /* 上下边距为16px,盒子的内容高度 = 14px + 16px + 16px = 46px */ padding: 16px 0px; } </style></head><body> <div class="item-1">利用内边距padding垂直居中 item-1</div></body></html>元素垂直居中的五种方式(元素垂直水平居中方式)

注意: 元素的总高度 = 字体大小 + 上下内边距 + 上下边框 + 上下外边距 元素的内容高度 = 字体大小 + 上下内边距 案例中的高度计算如下:

元素的总高度 = 14px + 16px + 16px + 1px +1px = 48px元素的内容高度 = 14px + 16px + 16px = 46px第三种:利用flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素内容垂直居中</title> <style> .parent { /* flex布局 */ display: flex; width: 500px; font-size: 12px; border: 1px solid skyblue; height: 40px; /* 将子盒子都垂直居中 */ align-items: center; } .item-1 { border: 1px solid red; height: 12px; } </style></head><body> <div class="parent"> <div class="item-1">利用flex布局,将子元素垂直居中在父盒子里 item-1</div> </div></body></html>

**注意:**使用flex布局,将子盒子垂直居中在父盒子中,利用align-items属性垂直居中

第四种:使用position: fixed 定位方式实现在浏览器窗口居中对齐方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position实现对齐方式</title> <style> .container { position: fixed; /* 元素向下移动浏览器窗口50%的距离 */ top: 50%; /* 元素向右移动浏览器宽口50%的距离 */ left: 50%; /* 元素向右移动自身宽度大小的-50%的距离,就是-250px; 元素向下移动自身高度大小 的-50%的距离,就是-150px; */ transform: translateX(-50%) translateY(-50%); width: 500px; height: 400px; border: 1px solid skyblue; box-shadow: 0px 0px 12px -5px rgb(0, 0, 0,0.4); } </style></head><body> <div class="container">浏览器的正中央位置</div></body></html>

效果图:

第五种:使用相对定位与绝对定位实现子盒子在父盒子上居中对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用相对定位与绝对定位实现子盒子在父盒子上居中对齐</title> <style> .parent { position: relative; width: 500px; height: 300px; border: 1px solid black; } .sub { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background-color: skyblue; } </style></head><body> <div class="parent"> 父盒子 <div class="sub">我是子盒子</div> </div></body></html>

效果图:

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

上一篇:微信小程序的几种传值方式(微信小程序几几年上线的)

下一篇:Python 计算机视觉(八)—— OpenCV 进行图像增强

  • 为什么每页页码一样(为什么每页页码不一样)

    为什么每页页码一样(为什么每页页码不一样)

  • 腾讯会员微信切换不了账号(腾讯会员登录微信怎么切换)

    腾讯会员微信切换不了账号(腾讯会员登录微信怎么切换)

  • 谷歌play点登录没反应(谷歌play登录不了)

    谷歌play点登录没反应(谷歌play登录不了)

  • 淘宝直播如何快速升挚爱(淘宝直播如何快速上链接)

    淘宝直播如何快速升挚爱(淘宝直播如何快速上链接)

  • 小米机器人怎么连接Wi-Fi(小米机器人怎么唤醒)

    小米机器人怎么连接Wi-Fi(小米机器人怎么唤醒)

  • oppok1什么时候上市的(oppok1什么时候更新coloros11)

    oppok1什么时候上市的(oppok1什么时候更新coloros11)

  • 短信可以呼叫转移吗(短信可以呼叫转移到另一个手机吗联通)

    短信可以呼叫转移吗(短信可以呼叫转移到另一个手机吗联通)

  • 苹果x感光怎么关闭(苹果x感光在哪)

    苹果x感光怎么关闭(苹果x感光在哪)

  • 怎么关注中国银行微信公众号(怎么关注中国银行网银)

    怎么关注中国银行微信公众号(怎么关注中国银行网银)

  • 手机所有声音都没了,是怎么回事(手机所有声音都变成听筒了)

    手机所有声音都没了,是怎么回事(手机所有声音都变成听筒了)

  • iphone11promax能不能双卡双待(苹果11pro max可以入手吗)

    iphone11promax能不能双卡双待(苹果11pro max可以入手吗)

  • 抖音企业号怎么改名字(抖音企业号怎么恢复个人账号)

    抖音企业号怎么改名字(抖音企业号怎么恢复个人账号)

  • 内存和外存相比主要特点是(内存和外存相比主要特点是存取速度快)

    内存和外存相比主要特点是(内存和外存相比主要特点是存取速度快)

  • cpu后面f代表什么意思(cpu后面带f和不带的区别)

    cpu后面f代表什么意思(cpu后面带f和不带的区别)

  • 8p128g什么基带(8p128g用的是什么基带)

    8p128g什么基带(8p128g用的是什么基带)

  • itunes怎么导入音乐(用itunes导入音乐)

    itunes怎么导入音乐(用itunes导入音乐)

  • 骚扰电话怎么拦截(骚扰电话怎么拦截小米)

    骚扰电话怎么拦截(骚扰电话怎么拦截小米)

  • nxtcl00是啥手机

    nxtcl00是啥手机

  • 5g技术特点(5g技术特点及其应用)

    5g技术特点(5g技术特点及其应用)

  • type-c数据线通用吗(type c数据线都一样吗)

    type-c数据线通用吗(type c数据线都一样吗)

  • MacBook触摸板如何升级更新最新版的(macbook触摸板如何拖动)

    MacBook触摸板如何升级更新最新版的(macbook触摸板如何拖动)

  • Cannot read properties of undefined (reading ‘validate‘)“(cannot read properties null)

    Cannot read properties of undefined (reading ‘validate‘)“(cannot read properties null)

  • WordPress忘记密码不能登陆怎么办,2种办法让你快速重置密码(wordpress账号密码忘记了)

    WordPress忘记密码不能登陆怎么办,2种办法让你快速重置密码(wordpress账号密码忘记了)

  • 设备租赁公司印花税怎么交
  • 资源税的税目有几个
  • 建筑劳务发票是全额抵扣吗
  • 分公司预缴企业所得税总公司可以抵扣吗
  • 如何分清进口农产品增值税抵扣率
  • 调研费包括哪些科目
  • 一般纳税人减免增值税政策
  • 企业股权转让是否交企业所得税
  • 出口货物是否属于存货
  • 高温补贴领取
  • 核定征收是每个月都要交税吗
  • 对公账户打钱给私人账户,谁交税呢
  • 资产减值准备的账务处理
  • 会计中包装物计入
  • 清算汇缴报表填写模板
  • 做财务报表是什么岗位
  • 委托加工物资合并报表
  • 外商投资企业盈余公积转增资本是否交预提所得税
  • u盘中病毒了怎么格式化
  • 预付账款可以为负吗
  • 销售黄金的会计分录
  • win10如何添加网络适配器
  • win11怎么打开设置
  • 房屋装修各项费用比例
  • 管理费用的会计编码
  • 贸易公司的采购
  • 短期借款帐务处理
  • 发票交付在哪里
  • vue.js mvvm
  • php设置图片将图片居中
  • php日期差数
  • 2020年农业病虫害
  • 进项税额转出会造成增值税应纳税额
  • 知识图谱实现方案
  • init 4命令
  • GCC strict aliasing – 嫉妒就是承认自己不如别人
  • 国际货运代理公司个人货物
  • 汽车上牌照的费用计入什么会计科目
  • 长期待摊费用当月发生当月要摊吗
  • 几个项目可以合到一起招标吗
  • 企业季度所得税申报流程
  • 单位结余资金该如何处理
  • 企业所得税实施条例第22条
  • 预付款项属于什么会计要素
  • 主营业务收入借方什么意思
  • 研发产品相关专业
  • 信用卡逾期滞纳金怎么收取
  • 应收账款期初余额错了怎么调整
  • 如何填写社会保障卡信息
  • 上年度凭证录错会计凭证录错了怎么修改
  • 免税企业开了含税吗
  • 哪些收入不需要开票
  • 支付安全生产费会计科目
  • 企业对私账户合法吗
  • 国际快递能发吗
  • MySQL创建数据库字符集和排序规则
  • mysql_info
  • win7旗舰版系统怎么样
  • xp如何查看系统位数
  • 破解xp系统密码
  • ntfs跟fat32
  • win单击变双击
  • scanexplicit.exe - scanexplicit是什么进程 作用是什么
  • linux命令tee
  • win10更新中重启会怎么样
  • 电脑预装软件是什么意思
  • windows10 2021预览版
  • linux系统入侵检测软件有哪些
  • jquery的选择器作用是选中某些元素
  • jquery的实现原理
  • android Lollipop(5.0)--touch feedback(触摸反馈)
  • android图片裁剪
  • python抓取整站链接
  • 国税网上办税大厅在哪
  • 怎么申请冬季取暖补贴
  • 应税消费品通过什么科目核算
  • 怎么代理保险业务
  • 下岗的党员需要交党费吗
  • 各种税务申报时间
  • 国税局发票查询电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设