我在 margin 问题上遇到了困难。基本上我有 4 个内联显示框。
我自己有盒子,然后是内部容器 .connect-box-wrap
。我想要做的是让 .connect-box-wrap
的水平边距是自动的,所以内容的开始是围绕盒子的中间点,使得 #contact-connect
显得更居中。现在看起来内部容器是左对齐的并且没有采用 margin: 0 auto;
。
我希望文本仍然左对齐...我只希望内部容器具有水平自动边距。
有什么想法吗?
这是它现在的样子(绘制显示边框的图像,如果有的话)。
我希望它看起来像这样:
这是代码摘要,有关所有四个框的完整代码,请参阅 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>
最佳答案
要在居中元素时使用 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/
关于html - 容器不收取自动 margin ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37665500/