居中 CSS：margin-left 和 -right 自动，但有趣的结果

centering CSS: margin-left and -right auto, but funny results

提问by JD?ugosz

You can view the page at http://led.dlugosz.com/.^※I want to make the "Gallery" section centered in the available space, not flush left.

您可以在http://led.dlugosz.com/查看页面。^※我想让“画廊”部分以可用空间为中心，而不是向左对齐。

So, I added rules

所以，我添加了规则

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

and it seemedto work just right. But, when I did the same thing on another page, it didn't work at all, and I can't find any difference. Then, playing around with this page some more, I find that at different window widths it works, doesn't work, or does something very odd. What's going on here? More to the point, how can I accomplish this effect?

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

---

---

※ I updated the page and eventually removed it.

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

回答by Gulfaraz Rahman

margin auto has worked for me in all cases with fixed width otherwise use

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

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

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

回答by Bibek

margin-left :autoand margin-right:autowill center the element if you set display: blockand specify the width of the element then the element align to center.

margin-left :auto并且margin-right:auto将围绕元素，如果你设定display: block并指定该元素则元素对齐到中心的宽度。

or else

要不然

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

回答by thirtydot

• On #main_col, add margin-right: 20.5em- this is the same width(18em) as your right sidebar, plus a little more for margin.
• On #main_col h2, remove the margin-rightproperty.
• On #main_col div > *, remove the margin-rightproperty.
• On #galleries ul, remove the margin-leftand margin-rightproperties, and add display: inline-block.
• On #galleries, add text-align: center.
• On #main_col h2and #galleries ul li, add text-align: left.

• 在 上#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。

Tested in Firefox only.

仅在 Firefox 中测试。

回答by PHP

Use this instead,

改用这个，

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

Where div class="wrap" would be what you want to center.

div class="wrap" 将是您想要居中的地方。

回答by blackcatweb

Did you use Firebug on the other page to be certain that the margin-left and margin-right properties were assigned to that element? They may have been overridden by a CSS rule with higher priority.

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

回答by JustasM

Correct me if I'm wrong, but I believe that "margin-left:auto;" and "margin-right:auto;" values only work on block elements. If you want to center inline elements you should use "text-align:center;".

如果我错了，请纠正我，但我相信“margin-left:auto;” 和“边距：自动；” 值仅适用于块元素。如果您想将内联元素居中，您应该使用“text-align:center;”。