如何在響應式設計佈局中摺疊左側填充或邊距？

Question

問題：

我目前正在從PDF模板工作;我對響應式設計比較陌生，並且遇到以下問題：我在頁面底部有一個按鈕，目前我正在使用設置的保留餘量值進行集中。但是，這樣做可以防止在重新調整屏幕大小時該按鈕「一直浮動」到左側。

目標：

有一個解決方案，其允許按鈕「全尺寸」瀏覽器過程中水平居中，但摺疊和浮動一路向左時，瀏覽器尺寸減小。

嘗試：

• 設置填充/保證金
• 設置兩個以上的自動
• 想過一個可怕的概念貧民區破解（我可以在技術上使圖像的白色長矩形按鈕居中然後使圖像流體，由此重新相當大的）

網站問題（OBJECT：橙色按鈕NEAR FOOTER）：

http://thedma.org/the-state-of-data/

Answer 1

您想對此使用媒體查詢。從事物的聲音中具體指定視口高度或視口寬度。

Link to documentation。

基本思想：

@media (max-height: 600px) { 
    .bottom-button { 
     /* styles */ 
    } 
} 
@media (min-height: 600px) { 
    .bottom-button { 
     /* different styles */ 
    } 
} 

Answer 2

這裏有一個工作fiddle

的訣竅是：

a { 
    display: block; 
    text-align: center; 
} 
img { 
    max-width: 100%; 
} 

假設a選擇對應於該按鈕的鏈接和img是你的形象。