边距：0px 自动；不会居中元素答案

【问题标题】：Margin: 0px auto; will not center element边距：0px 自动；不会居中元素
【发布时间】：2015-08-15 20:42:15
【问题描述】：

我正在尝试使用 margin: 0px auto 将我的按钮“浏览器组合”居中； .请有人可以解释为什么使用下面的 html 和 CSS 不起作用？

<div class="portfolio">
    <div class="container">
        <h3>Portfolio</h3>
        <div class="group1">
            <img src="http:....." style="height: 506px; width: 675px">

            <div class="group2">
                <h3>Client</h3>
                <h4>JPMorgan</h4>
                <h3>Role in Project</h3>
                <h4>Project Lead</h4>
                <h3>Project Included</h3>
                <h4>Mobile and Web Interface</h4>
                <a href="#">Browser</a>
            </div>
        </div>
        <div class="group3">
            <a href="#">Browser Portfolio</a>
        </div>
    </div>
</div>

<style>
    .portfolio .group3 {
        font-size: 0.9em;
        padding: 0.7em 1.5em;
        color: #5EC7E5;
        border-radius: 5px;
        font-weight: 600;
        border: 1px solid red;
        position: relative;
        margin: 0px auto;
        display: inline-block;
        width: 100%;
    }
</style>

【问题讨论】：

.group3 { text-align: center; }
谢谢。该解决方案有效。但是，对于我自己的发展和学习，我不明白为什么。使用margin是否有一定的先决条件：0px auto； ?
@mugman 是的，有 - display: 块和明确的宽度。请看我的回答。

标签： html css

【解决方案1】：

要使用margin: auto 居中元素，它们必须使用display: block 并具有明确的宽度。

将此类添加到您的 css 将使其工作：

.group3 a {
    display: block;
    width: 110px;
    margin: 0 auto;
}

或者，您可以像其他答案所说的那样使用text-align: center。

在此处查看 JS Fiddle：http://jsfiddle.net/rbuzach0/

编辑：当您问为什么某些属性没有从您的 <div> 继承到您的 <a> 时，这里有一个列表（来自 CSS2.1 规范，但仅此而已我可以以简洁的形式找到）哪些属性将继承，哪些不会：http://www.w3.org/TR/CSS21/propidx.html

检查“继承？”柱子。您会看到 Display 和 Margin 都没有继承。

【讨论】：

谢谢啤酒。但是，在我的原始代码中将“显示”元素从 inline-block 更改为 block，并不能解决问题吗？我已经指定了一个宽度。这是为什么呢？
不，您的原始 css 将这些属性赋予包含 div class="group3" 但它们不会继承到子元素。您需要将它们直接应用于<a> 元素。 inline-block 也不适用于 margin: auto
有关 CSS 继承的更多信息，请参阅更新的答案

【解决方案2】：

只需将 text-align:center 添加到您的 .group3 元素：

.group3 {
     text-align:center;
}

http://jsfiddle.net/8stggrpy/

当您在对象上指定宽度并应用 margin: 0 auto 时，该对象将位于其父容器的中心。

【讨论】：

谢谢。该解决方案有效。但是，对于我自己的发展和学习，我不明白为什么。使用margin是否有一定的先决条件：0px auto； ?
感谢 DJEBALI。但是，我不明白。在我的原始代码中，我已经指定了对象的宽度并应用了边距，因此，根据您的回答，该对象将因此位于其父容器的中心；它没？至少在添加 text-align 属性之前，我不明白这背后的逻辑。我以前使用过 margin: auto 没有 text-align 就好了，我想知道为什么这个特定情况不同。

【解决方案3】：

在 CSS 中定义文本对齐方式：

添加这一行

.portfolio .group3 {
text-align: center;  //Missing in your code.
}

查看演示here

【讨论】：