对准在特定宽度后移动

Question

我正在帮助将站点的端口转移到新服务器。所有这些都是继承的代码。一个示例页面是这个：http://fcxcobalt.fmi.com/products/

此标题：

<h1 class="main-content-heading"><span class="wrapper">Products</span></h1>

在屏幕宽度小于1690像素时，标题会根据需要对齐：

但是在1690px和更高的宽度下，元素左对齐到文档的主体。

标题自己的CSS可能不是问题，但它是

.main-content-heading {
  margin: 0 0 1.2em;
  padding: 0.5em 0;
  font-weight: 300;
  color: #fff;
  background: #1c3f94;
  text-transform: uppercase;
}

可以在此处看到未经授权的CSS：http://pastebin.com/s5MVMZVj

有人可以告诉我如何使这种对齐方式保持一致吗？

Answer 1

您在这里看到的是CSS中媒体查询的结果：

@media screen and (min-width:1707px){
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{
        margin:0 auto
    }

}

@media screen and (max-width:1040px){
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{
        margin:0 3%
    }

    .bx-aspect-wrapper{
        margin-bottom:-10em
    }

    .bx-pager{
        right:3%
    }

    .bx-slide-caption,.bx-prev,.bx-next{
        font-size:130%
    }

}

转换发生在1707像素（估计是1690像素，很好看！）。

这是一个响应式设计的例子，我的猜测是设计师希望为较小的屏幕保留一些左/右边距，而margin: 0 auto会导致边距全部崩溃。

您的浏览器没有任何问题，并且CSS按预期工作。

当然，一些人的尖锐过渡可能有点不雅观。

通过设置margin: 0 Mpx，M可能接近（1707px - {页面布局宽度，px}）/ 2的神奇像素数，可以使这更顺畅，但你必须尝试看到。

修复宽度大于1707像素的布局毛刺

我发现如果我在以下CSS代码段中省略margin: 0 auto声明，则“产品”标签会保留在原来的位置。

我只在Firefox中测试过这个。

@media screen and (min-width:1707px){
    .wrapper,.page-head,.site-menu,.droplets,.wide-content{
       margin:0 auto
    }
}