位置: 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 进行图像增强

  • 一般纳税人内账税金的处理
  • 公司股东向公司借款
  • 纳税人进口货物应当自海关填发税款
  • 劳务公司计税税率
  • 三个案例看清增值税即征即退?
  • 生产经营个人所得税退税流程
  • 公司车维修费
  • 主税零申报附加税怎样申报
  • 增值税申报表在哪里打印
  • 行政事业单位房产税免征文件
  • 投资企业应确认投资收益的有
  • 车间工人加班餐图片
  • 保修期内免费维修
  • 业务招待费记账凭证摘要
  • 库存商品期末计量
  • 营业执照缴纳印花税贴花怎么缴纳
  • 支付运费价税合计
  • 企业所得税季度预缴
  • 公司注销的流程和费用
  • 子公司销售给母公司商品
  • 销项税额抵减会取得专用发票吗为什么
  • 收到采购折扣的账务处理
  • 餐费没有发票怎么入账
  • 该设备正在使用中怎么关闭u盘
  • 固定资产一次性扣除后第二年账务处理
  • 哪些抵押物必须登记才有效
  • 无法收回的分公司怎么办
  • 事业单位固定资产计提折旧
  • vue项目管理器
  • 汇算清缴应补税额小于400
  • 同业代付会计分录
  • 公证处会计分录
  • php绘制图片
  • 钉钉工资表如何生成工资条?
  • 进项税年末结转分录
  • 大小周是否违反劳动法
  • 交易性金融资产包括哪些项目
  • 总包缴税
  • 建设单位和施工单位的责任和义务
  • java线程的执行体
  • 织梦前台数据不能存入中文
  • SQLite3中的日期时间函数使用小结
  • python怎么用?
  • 购入固定资产印花税税目是什么
  • 转出未交增值税借方余额怎么处理
  • 公司借款给个人的税务问题
  • 购销供应商
  • 重大水利工程建设
  • 2020年账簿印花税减免政策
  • 开了红字发票申请还要做进项税转出吗?
  • 宣传费抵扣
  • 微信和支付宝的区别
  • MySQL中的max()函数使用教程
  • 必应big
  • w10专业版最新版本
  • 修改远程桌面端口后,远程桌面连不上
  • mac更换软件图标
  • rundll32.exe在哪个文件夹
  • imac如何删除客人用户
  • ctrl+的作用
  • xp显示缩略图
  • xp电脑关机后自动重启是什么原因
  • linux防火墙放行
  • win10专业版装不上m1136驱动
  • 在对linux系统中dir
  • win10开机多了一个账户怎么删除
  • JavaScript 和 Java 的区别浅析
  • js 图像
  • jquery 鼠标悬浮显示文字
  • socket python
  • jquery1.8
  • node.js 微信小程序
  • node解决跨域
  • js验证正则表达式
  • jquery ui draggable
  • javascript和html区别
  • android 开源框架
  • 电子税务局下载app苹果版
  • 汕头市国税局公务员待遇
  • 如何加强木材加工质量
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设