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

【问题标题】：centering CSS: margin-left and -right auto, but funny results居中 CSS：margin-left 和 -right auto，但结果很有趣
【发布时间】：2017-11-14 23:39:11
【问题描述】：

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

所以，我添加了规则

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

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

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

【问题讨论】：

标签： css centering

【解决方案1】：

margin-left :auto 和 margin-right:auto 如果您设置 display: block 并指定元素的宽度，则元素将居中对齐。

否则

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

【讨论】：

在较早的答案中，您会看到我不想固定元素的实际宽度。

【解决方案2】：

改用这个，

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

div class="wrap" 将是您想要居中的位置。

【讨论】：

我真的不想固定元素的实际宽度，而且我不明白为什么将自动边距放在单独的“类”中会有任何不同。也许您只是在分享您的习语，而不是弄清楚为什么我目前使用相同的技术会做一些有趣的事情？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

在#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 中测试。

【讨论】：

向#main_col 添加边距尤其重要，因为现在您正在为所有内容添加右边距/填充。如果将边距和内边距添加到容器元素而不是每条内容，会容易得多。
在#main_col 上添加margin-right 会给我一个直列。一旦清除，我想图像按钮在侧栏周围流动。也许正是这件事混淆了浏览器的布局？您的另一个建议是将内联内容集中在 ul 中而不是 ul 本身，起到了作用。奇数行不同，但没关系。
你确定你想要"image buttons to flow around the side bar once it is cleared" - 当它这样做时，你的实时网站看起来像这样：http://i.imgur.com/EyZfl.jpg（不是很好） - 但如果你确定这是你想要的，那么它就是否则很好。如果我解决了您的问题，请accept my answer。谢谢。

【解决方案5】：

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

【讨论】：

是的，我检查了 Firebug 中的实际布局。

【解决方案6】：

如果我错了，请纠正我，但我相信“margin-left:auto;”和“margin-right:auto;” values 仅适用于块元素。如果你想将内联元素居中，你应该使用“text-align:center;”。

【讨论】：