html - CSS3 居中规则似乎阻止其他元素正确居中

Question

我正在尝试构建一个简单的单页 HTML5/CSS3 网站，但遇到了两个与布局相关的问题，我似乎无法解决。这是我的 jsFiddle .

如您所见，下载信息按钮显示为三种状态之一，具体取决于窗口的宽度:

• 要么显示在联系人电子邮件下方(如果窗口非常狭窄/移动)；要么或
• 如果窗口稍微宽一点，它就会固定在它所在部分的顶部(与电话号码一致)；或
• 如果窗口全屏/最大化，它就会固定在它所在部分的底部(与第二封电子邮件一致)

我正在寻找此按钮以展示以下行为:

• 如果窗口非常窄(例如在移动浏览器上)，那么我希望一切都保持原样，按钮位于第二封电子邮件下方； 但是……
• 只要窗口变宽一点，我希望它垂直居中，而不是固定在其 div 的顶部(因此，与第一封电子邮件一致)

此外，还有 3 <img>最底部的标签目前正在使用 placehold.it图片。我希望将它们水平居中，这样它们就不会再左对齐，而是均匀分布在它们所在的行上。

我相信这两个问题实际上是同一个 CSS/样式问题的一部分。在我大量的<style>标记，您会注意到以下规则:

#home .home-inner {
    display: inline;
    float: left;
    text-align: center;
    position: relative;
    width: 100%;
    padding: 10px;
}

我相信使文本居中对齐和相对会以某种方式阻止我将这些其他元素居中，但我无法弄清楚究竟是如何做到的。有什么想法吗？

Answer 1

必须在 CSS 中使用媒体查询，并根据最小宽度和最大宽度定义特定的 CSS。

看这里https://jsfiddle.net/sc5o7h1p/2/

对于 img :

@media screen and (max-width: 500px) {
  .client-logo {
    width: 90%;
    height: 75% !important;
  }
  .container-img  {
    width: 90% !important;
  }
}

所以我在你的 html 中添加了新的类

 <div class="col s4 m2 container-img">

还有你的 Btn

@media screen and (min-width: 500px) {
  .resume-download {
    position: relative;
    top: -117px;
    left: 272px !important;
    width:100% !important;
  }
}