CSS中具有动态宽度的居中内联块
作者：互联网
2026-03-27
HTML教程
所以..我有一个动态宽度页面.下面,包装器div将div内部居中.但是,每个div都有以下样式：
display:inline-block;width:400px; /* static */
这使得内部div并排.但这意味着根据浏览器的宽度剩下一些空格,并且可以并排多少div而不会破坏下一行.
要了解我的目标,请打开Google Chrome新标签页并拖动浏览器窗口以缩小尺寸.你会看到,当你走得太远时,一些chrome应用程序碰到了下一行,但它仍然保持居中.
在我的情况下,他们碰到下一行,并没有居中.
这就是我的代码：
我希望内部div是并排的,除非没有足够的空间,在这种情况下,结束一个将撞到下一行,所有同时保持在父div的中心.
谢谢你的帮助.
如果我理解你正确地将text-align：center添加到你的.wrapper样式应该给出所需的效果.有关示例,请参见 this fiddle.调整结果面板的大小以观察盒子的重新排序.就像Akaishen已经提到的内联块一样流动就像文本一样.这就是为什么你可以用text-align控制它们的对齐.但是,如果您希望对布局进行非常精细的控制,则可能会遇到使用内联块的问题.因为它们像文本一样流动,所以它们之间的空格不会被忽略.遗憾的是,您无法确定跨浏览器和操作系统的空间的绝对宽度.我的例子中的块之间的差距是由此引起的.
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
Python 操作 Word 文档节与页面设置
04/16
Python后端开发准则
04/16
Python 面向对象编程
04/16
第2周 Day 4：英语 Agent Web 版上线：从命令行到浏览器
04/16
python从入门到精通-第8章: 类型系统 — Python的类型注解革命
04/16
基于 SelectDB 实现 Hive 数据湖统一分析：洋钱罐全球一体化探索分析平台升级实践
04/16
使用 Python 压缩 PDF 文件的大小
04/16
Envira Gallery v1.13.2 汉化版 WordPress高级图库插件
04/16
观测云数据转发和存档最佳实践
04/16
Python 错误和异常处理
04/16
AI精选
