Question

正如标题所说，我如何将两个div完美地对接在一起？

我的HTML :(或者，好吧，有点）

<section class="team" id="team">
    <div class="container">
        <h3>The team behind CatCraft</h3>
        <div class="divider">
            <div class="hr">
                <div class="hr-dot"></div>
            </div>
        </div>
            <div class="row row-centered">
                <div class="team-centered col-md-4">
                    <img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
                    <h4 class="bold">CatX (Owner)</h4>
                    <p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
                </div>
                <div class="team-centered col-md-4">
                    <img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
                    <h4 class="bold">__Ast__ (Co-Owner)</h4>
                    <p>Example text, pls write something ;-;</p>
                </div>
            </div>
    </div>
</section>

我的CSS :(同样在这里，这不是全部）

我也尝试为上面的CSS制作一个盒子，但它没有用。 http://pastebin.com/SzhAmh3f

基本上我遇到的问题是上面的代码有点像，但是其中一个块比另一个稍低，我不明白为什么。是的，我知道还有其他关于这个主题的帖子，但没有人为我工作所以我决定打开自己的。

Answer 1

实际上有很多不需要的样式，你需要在team-centered类上使用以下代码。删除row-centered课程。看起来应该是这样的

<强> CSS

.team img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 10px auto 40px;
}
.team-centered {
  width: 50%;
  float:left;
  text-align: center;
}

<强> HTML

<section class="team" id="team">
    <div class="container">
        <h3>The team behind CatCraft</h3>
        <div class="divider">
            <div class="hr">
                <div class="hr-dot"></div>
            </div>
        </div>
            <div class="row">
                <div class="team-centered">
                    <img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
                    <h4 class="bold">CatX (Owner)</h4>
                    <p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
                </div>
                <div class="team-centered">
                    <img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
                    <h4 class="bold">__Ast__ (Co-Owner)</h4>
                    <p>Example text, pls write something ;-;</p>
                </div>
            </div>
    </div>
</section>

如何在HTML Bootstrap中居中2个div？

1 个答案: