容器不收取自动保证金

Question

我在保证金问题上遇到了困难。基本上我有 4 个内联显示框。

我自己有盒子，还有一个内部容器 .connect-box-wrap。我想要做的是让 .connect-box-wrap 的水平边距自动，这样内容的开始就在框的中间点附近，使 #contact-connect 看起来更居中。现在看起来好像内部容器左对齐而不是 margin: 0 auto;.

我希望文本仍然左对齐...我只希望内部容器具有水平自动边距。

有什么想法吗？

Fiddle

这是现在的样子（绘制显示边框的图像，如果有的话）。

我希望它看起来像这样：

这是代码摘要，有关所有四个框的完整代码，请参阅 fiddle。

#contact-connect {
    width: 80%;
    height: auto;
    margin: 0 10%;
    padding: 80px 0;
}
#contact-connect-box-container {
    margin: 0 auto;
    width: auto;
}
.contact-connect-box {
    width: 25%;
    margin: 60px 0 0 0;
    display: inline-block;
    /*border: 1px solid black;*/
    vertical-align: top;
    opacity: 0;
    transition:1s; -webkit-transition:1s;
}
.connect-box-wrap {
    margin: 0 auto;
}

<div id="contact-connect">
        <div id="contact-connect-box-container">
            <div class="contact-connect-box">
                <div class="connect-box-wrap">
                <h2 class="contact-connect-title">A</h2>
                <div class="contact-connect-description"><a href="tel:3304888300">555.555.5555</a></div>
                </div>
            </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

添加到#contact-connect text align center 并给.contact-connect-box text align left。

#contact-connect {
    width: 80%;
    height: auto;
    margin: 0 10%;
    padding: 80px 0;
  text-align: center;
}

.contact-connect-box {
    width: 20%;
    margin: 60px 0 0 0;
    display: inline-block;
    /*border: 1px solid black;*/
    vertical-align: top;
    opacity: 1;
    transition:1s; -webkit-transition:1s;
  text-align: left;
}

Fiddle Example

Answer 2

给.connect-box-wrap加上宽度，比如width:80%。否则它将默认为 100% 宽度并且 margin:0 auto 不会做任何事情。

Answer 3

Margin: 0 auto 仅在元素设置了宽度时有效。另外元素不能是 display: inline 或 display:block.

另一种方法是将元素设置为 display: inline-block，并将父元素设置为 text-align: center。

Answer 4

要在使元素居中时使用 margin: 0 auto;，此答案中概述了一些要求：

The element must display: block

The element must not float

The element must not have a fixed or absolute position

The element must have a width that is not auto

所以您的实现中唯一缺少的是设置宽度。您可以将其设置为小于 100% 的百分比，您应该会注意到您正在寻找的变化。 https://jsfiddle.net/bm4jpwh1/2/

容器不收取自动保证金

Container not taking an auto margin

html

css

position