以響應式設計爲中心所有圖像

Question

我想知道是否有一種很好的通用簡單方法來編碼/陳述所有圖像在某個視口下方的響應式設計中水平居中。

例如，低於480px寬的視口，所有圖像顯示爲塊，並在屏幕上居中顯示。

Answer 1

你需要使用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實際的CSS/big.css

例如在small.css，定義下面的樣式

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

，並沒有必要big.css定義什麼（默認值被應用）

Answer 2

我不知道，如果它的工作原理，但儘量

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

但有些部分的工作，但我不能完全肯定是否會解決所有的方式，由於一些div可能不會繼承寬度並且不會將所有圖像對齊到中心。