布局题:div垂直居中,左右10px,高度始终为宽度一半
发布日期:2021-11-21 16:35:43
浏览次数:8
分类:技术文章
本文共 557 字,大约阅读时间需要 1 分钟。
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A,文字需要水平垂直居中。思路一:利用height:0; padding-bottom: 50%;Document 备注:padding-bottom是相对于父元素的width值。out_wrapper:CSS呈流式布局,div默认宽度填满,即100%大小,给out_wrapper设置margin: 0 10px;相当于让左右分别减少了10px。父元素相对定位,那绝对定位下的子元素宽高若设为百分比,是相对于父元素的(content + padding)值, 注意不含border延伸:如果子元素不是绝对定位,那宽高设为百分比是相对于父元素的宽高,标准盒模型下是content, IE盒模型是content+padding+border。思路二: 利用calc和vwADocument A
转载地址:https://blog.csdn.net/yyychocolate/article/details/108151946 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
留言是一种美德,欢迎回访!
[***.207.175.100]2024年03月12日 00时09分49秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
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根目录没有卷组,linux – 卷组消失了,LV仍然可用
2019-04-21
网络备份linux系统,如何备份Linux系统
2019-04-21
linux node 升级,linux如何升级node.js?
2019-04-21
linux 硬件变化记录,[记录]ARM,linux开发控制硬件之还是那个LED
2019-04-21