圆月山庄资源网 Design By www.vgjia.com
日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决方法,示例如下:
有如下代码:
<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目前的兼容性不是很好,如果需要支持较老的浏览器版本,慎用哦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]