如何在响应式设计布局中折叠左侧填充或边距？

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是你的形象。