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

问题:

我目前正在从pdf模板工作；我对响应式设计相对较新，并且对以下内容存在问题：我在页面底部有一个按钮，目前正在使用设置的左边距值居中。但是，这样做可以防止按钮在屏幕重新调整大小期间一直“浮动”到左侧

目标：

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

尝试：

• 设置填充/边距
• 将上述两项设置为自动
• 想到了一个可怕的概念上的犹太人区黑客（我可以技术上使图像成为一个长的白色矩形，按钮居中，然后使图像流动，从而重新调整大小）

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

---

您想对此使用媒体查询。特别是视口高度或视口宽度

基本思想：

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

给你一张工作票

诀窍是：

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

---

假设

a

选择按钮对应的链接，并且

img

是您的图像。

一般来说，不要将链接放在网站上，让人们查看您的代码。一旦它被修复，未来的问题寻求者就不可能看到问题是什么，因此，如果选择的答案与他们相关。我没有建立网站，让人们看我的代码，我建立网站，让他们可以直观地看到问题，但我的观点是正确的。为什么我会得到-1？不完全确定；然而，关于媒体对stackoverflow的查询有很多问题。这是Le_Morri的一个很好的技巧，但我不确定如果元素不在链接中，它是否会起作用。感谢您提供了与此情况相关的解决方案，因为它在跨浏览器中非常有效