我想知道是否有一种好的、通用的、简单的方法来编码/声明所有图像在特定视口(viewport)下方的响应式设计中水平居中。
例如,低于 480 像素宽度的视口(viewport),所有图像都显示为 block 并在屏幕上居中。
最佳答案
您需要结合使用 CSS 媒体查询和实际 CSS...
例如您可以拥有 2 个独立的 CSS 文件,并根据设备特性调用相关的文件
<link href="small.css" media="only screen and (max-width:480px)" />
<link href="big.css" media="only screen and (min-width:480px)" />
然后在 small.css/big.css 中定义实际的 CSS
例如在small.css中,定义如下样式
img {margin:o auto;text-align:center}
并且无需在 big.css 中定义任何内容(应用默认值)
关于css - 将所有图像集中在响应式设计上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9235125/