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

【问题标题】：How to Collapse Left Side Padding or Margin in Responsive Design Layout?如何在响应式设计布局中折叠左侧填充或边距？
【发布时间】：2014-11-05 01:16:19
【问题描述】：

问题：

我目前正在制作一个 from-pdf 模板；我对响应式设计比较陌生，并且遇到以下问题：我在页面底部有一个按钮，我目前使用设置的 margin-left 值居中。但是，这样做可以防止该按钮在屏幕调整大小期间一直“浮动”到左侧。

目标：

有一个解决方案，允许按钮在“全尺寸”浏览器期间水平居中，但在浏览器尺寸减小时折叠并一直向左浮动。

尝试过：

设置填充/边距
将以上两项都设置为自动
想到了一个可怕的概念贫民窟黑客（我可以在技术上将图像制作为一个长长的白色矩形，按钮居中，然后使图像流畅，从而调整大小）

有问题的网站（对象：页脚附近的橙色按钮）：

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

【问题讨论】：

一般来说，不要放置网站链接让人们查看您的代码。一旦它解决了，未来的问题寻求者就不可能看到问题是什么，因此选择的答案是否与他们相关。
我没有建立网站让人们查看我的代码，我把它建立起来是为了让他们可以直观地看到问题，但重点是。
为什么我收到 -1？
不完全确定；然而，他们有很多关于 stackoverflow 上媒体查询的问题。

标签： css margin padding

【解决方案1】：

你有一个工作的fiddle

诀窍是：

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

假设a选择了按钮对应的链接，img是你的图片。

【讨论】：

这是 Le_Morri 的绝妙技巧，但我不确定如果元素不在链接中，它是否会起作用。感谢您提供与这种情况有关的解决方案，因为它在跨浏览器上运行良好

【解决方案2】：

您想为此使用媒体查询。特别是视口高度或视口宽度来自事物的声音。

Link to documentation.

基本思路：

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

【讨论】：