CSS实现自适应布局:子元素项目整体居中,内部项目左对齐
日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决方法,示例如下:
有如下代码:
<div class="wrap"><button class="btn">1</button><button class="btn">2</button><button class="btn">3</button><button class="btn">4</button><button class="btn">5</button><button class="btn">6</button><button class="btn">7</button>
</div>
对应的CSS为:
.wrap {border: 2px solid black;margin: 0 auto;padding: 10px;width: 40%;
}
.btn {outline: none;border: none;width: 180px;height: 30px;background-color: cornflowerblue;margin: 5px;
}
显示的效果:
动态变化宽度的情况:
可以看到,当我们缩小浏览器窗口大小时,父元素(黑框)的宽度会动态调整,其子元素也会根据父元素的宽度动态排列,但是按钮组在父容器中是左对齐的,我们想要让这个整体保持居中,可以通过如下方式实现:
CSS代码:
.wrap {border: 2px solid black;margin: 0 auto;padding: 10px;width: 40%;display: grid;grid-template-columns: repeat(auto-fill, 200px);justify-content: center;
}
.btn {outline: none;border: none;width: 180px;height: 30px;background-color: cornflowerblue;margin: 5px;
}
将父元素display
属性设置为grid
,然后grid列模板为自动填充,宽度为200px
(这里宽度比单个按钮元素稍大一点即可),然后设置justify-content
属性值为center
使内容水平居中。效果如下:
动态变化的效果:
可以看到,在宽度变化的过程中,子元素整体一直是保持居中的。
单纯用CSS实现这样的效果,我只想到用grid来实现了,若你有其他方法,欢迎留言,一同学习~
提示:grid目前的兼容性不是很好,如果需要支持较老的浏览器版本,慎用哦!
CSS实现自适应布局:子元素项目整体居中,内部项目左对齐相关推荐
- 深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素
深入理解CSS之 如何使子元素撑宽 设置了display: block; 的父元素 先写一个模板,晚点再吐槽 吐槽 实现原理 与 更多支持的属性 不想使父级的 块 属性消失怎么办 这种属性规则有什么作 ...
- html中div自适应代码,CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: 左右两侧,左侧固定宽度200px;右侧自适应占满 .box{ width:800px; heig ...
- html表格整体放大,纯CSS实现自适应布局表格
插件描述:如何让table元素也能表现出自适应性?按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它.那么,怎样让一个传统的表格也表现出自适应性呢? ...
- html自动适应布局,用纯CSS实现自适应布局表格
以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要.这种网页布局就是"自适应布局&q ...
- html图片自适应表格,如何用纯CSS实现自适应布局表格
您可能感兴趣的话题: CSS 核心提示:这是自适应布局技术中的一个难题,如何让table元素也能表现出自适应性. 以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的 ...
- html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是 后代选择器 与 子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...
- css:子元素div 上下左右居中方法总结
情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案: { position:fixed; left:0; right:0; top:0; bottom:0; margin:a ...
- Css hover时 取子元素 切换img 实现图片移入切换
<div class="patent-case"><div class="patent-title-imgo"><img src= ...
- 项目整体管理:项目整体管理概述
项目整体管理包括:识别.定义.组合.统一和协调各项目管理过程组的各种过程和活动而开展的工作,是项目管理中一项综合性和全局性的管理工作. 整体管理就是要决定什么时间把工作量分配到相应的资源上,有哪些潜在 ...
最新文章
- 为什么说百度教育大脑3.0,是中国教育迎来的真正智慧大脑?
- TCP协议连接的11种状态浅谈
- android预加载布局,Android 懒加载优化
- lcd残影原理_为什么同样是高刷,OLED 可以比 LCD 优秀?
- java版本号管理_微服务项目中如何管理依赖版本号?
- 201521123057 《Java程序设计》第12周学习总结
- 将指定的计数添加到信号量中会导致其超过_并发编程用不上?Semaphore信号量了解一下...
- IT行业的职员加班到底有没有价值?
- 如何在 OpenResty 中使用 websocket
- 国家机构测评主流电视品牌语音识别 长虹Q5K综合评价最佳
- Android OpenGL ES(十三)通用的矩阵变换指令 .
- cloverconfig机型修改_黑苹果完善系列教程之——clover配置教程
- ERP原理及应用教程-第二章
- PVID和VID详解
- siggraph_SIGGRAPH的Unity
- YY游戏云的AngularJS实践
- 技术分享 | OpenVINO及EdgeX摄像头管理和推理平台
- G笔试题-2012年9月25日
- php 排队叫号源码,排队叫号机源代码
- STemwin 实现滑动切换主页 滑动翻页 滑动解锁功能
热门文章
- Python数据科学包(六)-----数据可视化和例子
- 《520七夕情人节表白礼物》❤520表白星空漫漫3D相册❤(HTML+CSS+JavaScript)
- ./configure的含义
- 【bzoj1143】[CTSC2008]祭祀river Floyd+网络流最小割
- 只使用无线网卡突破内网限制
- 提高中职计算机知识教学改革途径,提高中职计算机基础知识教学改革的途径
- 亚马逊的飞轮效应到底是不是真的?
- mybatis 传入参数及其 foreach collection的三种用法
- 无盘服务器chkdsk * f)修复命令,我有文件损坏了,运行CHKDSK后根本没用,怎么处理...
- 【与达梦同行】达梦数据库主备集群搭建