居中CSS：margin-left和-right auto，但结果很有趣

Question

你可以在http://led.dlugosz.com/查看页面。 ^※我想让“Gallery”部分在可用空间中居中，而不是向左冲洗。< / p>

所以，我添加了规则

margin-left: auto;
margin-right: auto;

并且似乎才能正常工作。但是，当我在另一个页面上做同样的事情时，它根本不起作用，我找不到任何区别。然后，再一次玩这个页面，我发现它在不同的窗口宽度下工作，不起作用，或做一些非常奇怪的事情。这里发生了什么？更重要的是，我怎样才能达到这个效果？

---

※我更新了页面并最终删除了它。

Answer 1

margin auto在所有固定宽度的情况下都适用于我，否则使用

http://css-tricks.com/centering-in-the-unknown/

Answer 2

• 在#main_col上添加margin-right: 20.5em - 这与您的右侧边栏相同width（18em），再加上保证金。
• 在#main_col h2上，删除margin-right属性。
• 在#main_col div > *上，删除margin-right属性。
• 在#galleries ul上，移除margin-left和margin-right媒体资源，然后添加display: inline-block。
• 在#galleries上，添加text-align: center。
• 在#main_col h2和#galleries ul li，添加text-align: left。

仅在Firefox中测试。

Answer 3

如果您设置margin-left :auto并指定元素的宽度，那么

margin-right:auto和display: block将使元素居中，然后元素与中心对齐。

或者

margin: 0 auto;
width: 100px;
display: block;

Answer 4

请改用

.wrap {width: 980px; margin: 0 auto;}

div class =“wrap”将成为你想要的中心。

Answer 5

您是否在另一页上使用Firebug以确保将margin-left和margin-right属性分配给该元素？它们可能已被具有更高优先级的CSS规则覆盖。

Answer 6

如果我错了，请纠正我，但我相信＆＃34; margin-left：auto;＆＃34; ＆＃34; margin-right：auto;＆＃34;值仅适用于块元素。如果要将内联元素居中，则应使用＆＃34; text-align：center;＆＃34;。