布局题:div垂直居中,左右10px,高度始终为宽度一半
发布日期:2021-11-21 16:35:43 浏览次数:8 分类:技术文章

本文共 557 字,大约阅读时间需要 1 分钟。

问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A,文字需要水平垂直居中。思路一:利用height:0; padding-bottom: 50%;      
Document
A
备注:padding-bottom是相对于父元素的width值。out_wrapper:CSS呈流式布局,div默认宽度填满,即100%大小,给out_wrapper设置margin: 0 10px;相当于让左右分别减少了10px。父元素相对定位,那绝对定位下的子元素宽高若设为百分比,是相对于父元素的(content + padding)值, 注意不含border延伸:如果子元素不是绝对定位,那宽高设为百分比是相对于父元素的宽高,标准盒模型下是content, IE盒模型是content+padding+border。思路二: 利用calc和vw
Document
A

 

转载地址:https://blog.csdn.net/yyychocolate/article/details/108151946 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS如何进行品字布局?
下一篇:盒模型

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2024年03月12日 00时09分49秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java注解与java配置类,使用@ConfigurationProperties注解实现springboot里配置映射到Java类上... 2019-04-21
php鼠标点击事件,JS鼠标点击事件的实现 2019-04-21
php ice 性能,ZeroICE+PHP整合 2019-04-21
php投票cookie限制,PHP利用cookie做的投票程序 2019-04-21
php去掉所有,php如何去掉所有标签 2019-04-21
java 图片到本地,java下载图片到本地实例 2019-04-21
java迷宫寻宝,迷宫寻宝 2019-04-21
php 无限分类页面怎么输出,php无限分类且支持输出树状图的详细介绍_PHP 2019-04-21
php 汉字转温度,php的汉字转换: GBK->Big5_php 2019-04-21
php 查看memcache,怎样查看memcache的日志 2019-04-21
小提琴的pHP制作视频,我想自己制作一把小提琴 2019-04-21
fedora mysql gui,fedora 14 启用无线网卡 | 勤奋的小青蛙 2019-04-21
php快速学习方法,PHP快速学习指南 2019-04-21
php怎么限制本服务器连接,PHP TCP套接字连接限制 – Windows服务器 2019-04-21
linux 文件 utf8 c语言,linux下如何测试socket server端可以接受utf-8编码的数据?(用c语言开)发... 2019-04-21
linux根目录没有卷组,linux – 卷组消失了,LV仍然可用 2019-04-21
linux suds 只能在当前目录,有没有办法为我的Python应用程序提供基于平台的条件requirements.txt文件?... 2019-04-21
网络备份linux系统,如何备份Linux系统 2019-04-21
linux node 升级,linux如何升级node.js? 2019-04-21
linux 硬件变化记录,[记录]ARM,linux开发控制硬件之还是那个LED 2019-04-21