特定宽度后对齐位移

我正在帮助将网站的端口连接到新服务器。所有这些都是继承的代码。一个例子页面是这一个：http://fcxcobalt.fmi.com/products/特定宽度后对齐位移

此标题：

enter image description here

但在1690px和更高宽度的：如所期望

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

在屏幕宽度小于1690px标题对准元素左对齐文档的主体。

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

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

Unminified CSS可以看这里：http://pastebin.com/s5MVMZVj

谁能告诉我为这对准怎么可以做出是否一致？

来源

2013-04-25 jerrygarciuh

你所看到的是在CSS媒体查询的结果是：（！你估计1690px，以及斑点）

@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% 
    } 

}

在发生在1707px将交换机。

这是一个响应式设计的例子，我的猜测是设计师想要为小屏幕保留一些左/右边距，因为margin: 0 auto会导致边缘全部塌陷。

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

当然，对于一些人来说，这种急剧的转变可能有点难看。

通过设置margin: 0 Mpx可以使其更平滑，其中M是可能接近（1707px - {页面布局宽度（px））/ 2的魔法像素数量，但您必须尝试查看。

固定布局毛刺的宽度大于1707px

我发现，如果我在下面的CSS代码片断离开了margin: 0 auto声明中，“产品”的标签保持它是假设。

我只在Firefox中测试过。

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

来源

2013-04-25 23:49:29

谢谢你的回应！我可能没有清楚说明我的问题 - 我希望将标题与菜单和页面内容永久对齐。我猜测给定的结构，这将涉及针对所包含的跨度，但我对如何给它留下填充总是匹配的损失。 – jerrygarciuh 2013-04-26 00:22:50

@jerrygarciuh我重读了你的问题，重新检查了CSS，发现要查看布局问题，你需要一个非常大的屏幕，而且我的笔记本电脑屏幕不够宽。我看到了这个问题，我想我现在该如何解决这个问题，但明天早上还会回来。 – 2013-04-26 01:44:59

非常感谢你！我永远不会找到它！ – jerrygarciuh 2013-04-27 03:20:32

特定宽度后对齐位移

回答

相关问题