hbuilder如何设置图片居中显示_Hbuilder div的垂直居中

发布时间:2021-12-04 00:14:58

前言


我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。


固定高宽div垂直居中



如上图,固定高宽的很简单,写法如下:


position:absolute;left:50%;top:50%;width:200px;height:100px;margin-left:-100px;margin-top:-50px;


不固定高宽div垂直居中的方法


方法一:


用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。


html如下:


class="block"style="height:300px;">class="centered">haorooms案例题目haorooms案例内容,haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容


css如下:


/* This parent can be any width and height */.block{text-align:center;}/* The ghost, nudged to maintain

相关文档

  • 新入职自我介绍日语
  • 初一英语作文:MyFavoriteSport我最爱的运动
  • 2018年10月自考经济类成本会计真题
  • 孕妇产后瘦腰减肥方法
  • 表达我爱你句子
  • Hash,从认识到理解,Hash是什么?散列是什么?映射是什么?哈希函数散列函数是什么?有了地址值为什么还需要哈希值?
  • 个人求职简历制作要点
  • vivo如何获得root权限
  • 靖江圆通快递在哪
  • 毕业欢送晚会优选主持稿
  • 关于ConstraintLayout的部分属性总结
  • 写给数学老师的一封信
  • 笔记本电脑开机后黑屏出现一个光标怎么办
  • 听讲座心得体会范文3篇
  • 新发现有助于阿尔茨海默氏症早期诊断
  • 八年级话题作文:失去后才知道可贵
  • 大学演讲稿大全优秀范文集锦
  • 灵感日记的美文
  • 《编译原理及实践》题解??4.02
  • 下雪了作文250字
  • 农村气代煤改造工程吹扫、强度、严密性功能试验实施指导意见
  • 老师的眼神七年级写人作文(精选5篇)
  • 动态对比度是什么多少为合适
  • 喝普洱茶熟茶能减肥吗
  • 小学六年级优秀作文关于写我的理想
  • 语义分割--FCN 算法中的一些细节--特征怎么融合
  • 男衬衫太长了怎么穿
  • 春光美阅读题答案
  • 剪辑视频关键帧的作用
  • Google大数据三篇著名论文中文版
  • 猜你喜欢

  • 包钢_460mm三辊连轧管机组的工艺装备特点
  • 宜君县致源种植专业合作社企业信息报告-天眼查
  • 气象仪表项目可行性研究报告(可编辑)
  • 幼儿园中班下学期安全教案《我们不玩火》含反思
  • 黑龙江省永通物流有限公司企业信用报告-天眼查
  • 无土育苗技术处理
  • 笔记本电脑无法进入睡眠状态_在Win10 v2004以上版本启用S3睡眠并禁用Modern Standby待机的终极解决方案...
  • 高一叙事作文:写给高一_800字
  • 2013年高考数学总复* 9-7 用向量方法证明*行与垂直(理)课件 新人教B版
  • 铝电极箔材料项目投资申请报告
  • 2017-2023年中国及全球冷热玻璃棉管行业市场发展战略分析及投资前景专项预测报告(目录)
  • 在天源迪科TYDIC办理离职。。
  • 辽宁省鞍山市岫岩县红旗营子中学八年级语文上册《老王》导学案(无答案) 新人教版
  • 高考语文二轮复*专题训练:第1部分第7章 特色训练1 《〈论语〉选读》和其他典籍的组合训练
  • 营销部文明单位申报材料与营销部电话销售工作总结汇编.doc
  • 焊接培训 国际认证 联接世界 共创未来
  • 鱿鱼烧五花肉的做法
  • 整形手术的风险 The Risks of Plastic Surgery
  • 河北鼎一久通信工程有限公司(企业信用报告)- 天眼查
  • 考研复试英语常见的问题有哪些
  • 2006年华南理工大学452物理化学考研试题
  • 2020年小学六年级毕业典礼主持词范文
  • 日用耳软骨再造气管软骨
  • 河北省唐山市曹妃甸区七年级政治下学期期末考试试题(扫描版) 新人教版
  • 216014公司自行制作广告作业流程
  • 【精编】中小学精品课件制备实验方案的设计课件.ppt
  • 20XX年10月小学教师述职述廉报告
  • 选修七 3《Unit 3 Listening and speaking》PPT课件 公开课精品课件 公开课精品课件
  • 格兰仕 2008空调终端导购培训之空调产品培训
  • 关于游子吟教案
  • 人教版七年级数学上册4.2_直线、射线、线段(第2课时)课件ppr优秀课件
  • 2013年执业中药师,真题,中药学综合知识与技能
  • 陕西汇腾投资有限公司(企业信用报告)- 天眼查
  • 最新房地产工作计划安排
  • 【优质】小学生作文仿写荷花-范文模板 (2页)
  • 学习Ant Design Pro 从入门到放弃 第一节:搭建项目
  • 【免费下载】呼和浩特市赛罕区第二十二中学校园管理材料
  • 六个月宝宝咳嗽有痰流鼻涕怎么办
  • 龙岩市系统集成公司研究报告2018版
  • PBL教学在中医内科学课堂教学中的应用
  • 江苏省造价工程师考试安装计量知识:锅炉给水的处理方法试题
  • 八年级历史上册第五单元人民解放战争的胜利第22课三大战役与全国解放*题讲评课件岳麓
  • 电脑版