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>

嵌套边距以实现居中内容

1 个答案: