центрирование всех Imgs на адаптивном дизайне

Question

Мне интересно, есть ли хороший, общий, простой способ, чтобы кодировать / представлять все изображения, которые должны быть центрированы по горизонтали в адаптивном дизайне ниже определенного окна просмотра.

Например, ниже ширины 480pxокно просмотра, все изображения отображаются в виде блока и центрированы на экране.

Answer 1

Вам нужно будет использовать комбинацию CSS Media Queries и фактического 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)" />

Затем определите фактический CSS внутри small.css / big.css

например. в small.css определите следующий стиль

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

и не нужно ничего определять в big.css (применяется по умолчанию)

Answer 2

Я не уверен, что это работает, но попробуйте

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

, но какая-то часть будет работать, но я не совсем уверен, будет ли все работать, потому что некоторые DIV, возможно, не наследуютширина и не выровняет все изображения по центру.