将所有图像集中在响应式设计上

Question

我想知道是否有一种好的，通用的，简单的方法来编码/声明所有图像在某个视口下方的响应式设计中水平居中。

例如，在480px宽度视口以下，所有图像都显示为块并在屏幕上居中。

Answer 1

您需要结合使用CSS Media Queries和实际的CSS ...

e.g。您可以拥有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

e.g。在small.css中，定义以下样式

img {margin:o auto;text-align:center}

并且无需在big.css中定义任何内容（默认应用）

Answer 2

我不确定它是否有效，但请尝试

img { margin:o auto; text-align:center}

但是有些部分可以使用，但是我不能完全确定是否会因为某些DIV可能没有继承宽度并且不会将所有图像对齐到中心而全面工作。