html - 容器不收取自动 margin

Question

我在 margin 问题上遇到了困难。基本上我有 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

要在居中元素时使用 margin: 0 auto;，此答案中概述了一些要求: https://stackoverflow.com/a/4955135/2106563

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/