嵌套边距以实现居中内容

Question

我遇到了一个问题，即尝试使子 div 居中，同时保持内容左对齐。我有四个内联框，这些框设置为 25% 宽度并且自然左对齐。我的问题是四个框看起来不像它们在页面上居中，因为框内的自然对齐。您可以在第一张图片中看到这一点。

所以我想做的是在我的.contact-connect-box 中创建一个子 div（connect-box-wrap），在某种程度上作为盒子内部的包装并添加 margin: 0 auto;，但这根本没有帮助.

如果你看第二张图片，那就是我想要的。我希望内容仍然左对齐，但所有内容的边距都被移动，以便框定位显示在页面的中心。

 #contact-connect {
          width: 80%;
          height: auto;
          margin: 0 10%;
          padding: 80px 0;
      }
      #contact-connect-box-container {
        margin: 0 auto;
        width: auto;
        /*display: flex;
        justify-content: space-around;*/

      }
       .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">Call</h2>
                <div class="contact-connect-description">gfdgg</div>
                </div>
            </div><div class="contact-connect-box">
            <div class="contact-connect-box">
                <h2 class="contact-connect-title">Write</h2>
                <div class="contact-connect-description">
                    Reach out to us
                    <br>
                    <div id="scroll" class="contact-connect-link">Fill out our contact form.</div>
                    </div>
                </div>
            </div><div class="contact-connect-box">
            <div class="contact-connect-box">
                <h2 class="contact-connect-title">Visit</h2>
                <div class="contact-connect-description">
                    gsdfg
                </div>
                </div>
            </div><div class="contact-connect-box">
            <div class="contact-connect-box">
                <h2 class="contact-connect-title">Connect</h2>
                <div class="contact-connect-description">
                    <div class="contact-connect-link"><a href="http://facebook.com" target="_blank">Visit us on Facebook</a></div>
                    <div class="contact-connect-link"><a href="http://youtube.com" target="_blank">See us on Youtube</a></div>
                    <div class="contact-connect-link"></div>
                </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

我会废弃 .content-connect-box-container，因为您已经拥有 .content-connect-box，所以这似乎是多余的。我通过中心文本对齐 .content-connect-box 然后左文本对齐 .connect-box-wrap 来做到这一点。还要注意如何选择间距。如果您在 % 中工作，请务必坚持这一点，如果您将 % 与 px 混合使用，某些屏幕尺寸会破坏您的布局。随意在我的代码中使用不同的边距 %s，看看我是如何分隔所有内容的。

    <div id="contact-connect">

        <div class="contact-connect-box">
            <div class="connect-box-wrap">
            <h2 class="contact-connect-title">Call</h2>
                <div class="contact-connect-description">gfdgg hgakhglkrjhg kjshfglkjshd flkjgshfd oweir werowheor weriwjeroija 
                </div>
            </div>
        </div>

        <div class="contact-connect-box">
            <div class="connect-box-wrap">
            <h2 class="contact-connect-title">Call</h2>
                <div class="contact-connect-description">gfdgg
                </div>
            </div>
        </div>


        <div class="contact-connect-box">
            <div class="connect-box-wrap">
            <h2 class="contact-connect-title">Call</h2>
                <div class="contact-connect-description">gfdgg
                </div>
            </div>
        </div>


        <div class="contact-connect-box">
            <div class="connect-box-wrap">
            <h2 class="contact-connect-title">Call</h2>
                <div class="contact-connect-description">gfdggaksj 
                </div>
            </div>
        </div>

 </div>

<style type="text/css">

#contact-connect {
      width: 80%;
      height: auto;
      margin: 0 10%;
      padding: 80px 0;
      display: block;
  }


   .contact-connect-box {
      width: 21%;
      margin: 0 0 0 1%;
      display: inline-block;
      border: 2px solid black;
      vertical-align: top;
      text-align: center;

  }


  .connect-box-wrap {
    margin: 10% auto;
    width: 50%;
    text-align: left;

  }



  </style>