Question

我有一个部分，我想看起来好像它在页面的中心。我有四个框出现inline，我相信他们不喜欢他们居中的原因是因为一切都自然地与左边对齐。问题是，我不希望这些框中的内容居中，我希望它们左对齐。

那么如何让这些框看起来好像它们在页面中居中，但不会影响我的文字呢？

＆＃13;

#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;
  transition:1s; -webkit-transition:1s;
}

＆＃13;

<div id="contact-connect">
    <div id="contact-connect-box-container">
        <div class="contact-connect-box">
            <h2 class="contact-connect-title">Call</h2>
            <div class="contact-connect-description">vcxv</div>
        </div>
        <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 class="contact-connect-box">
            <h2 class="contact-connect-title">Visit</h2>
            <div class="contact-connect-description">
                fgrge
            </div>
        </div>
        <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>

＆＃13;

Answer 1

您只需在＃contact-connect-box-container

上添加“display：flex”即可

#contact-connect-box-container {
  margin: 0 auto;
  width: auto;
  display: flex;
}

演示： https://jsfiddle.net/w776Lq1u/8/

Answer 2

问题是“连接”右侧的边距。我建议您使用flexbox并使用display: flex; justify-content: space-around;这样您根本不需要任何边距。

编辑：plnkr

集中内联元素问题

2 个答案: