【问题标题】:How do I center 2 divs in HTML Bootstrap?如何在 HTML Bootstrap 中居中 2 个 div?
【发布时间】:2016-09-16 14:55:01
【问题描述】:

正如标题所说,如何将两个 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

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

【问题讨论】:

  • 你能帮我粘贴一个 bootply 或 jsfiddle 链接吗? PasteBin 被我的公司屏蔽了...
  • 您能否也发布您的 CSS,以便我们查看您的其他类/id 属性是什么?
  • 您对 flexbox 解决方案还满意吗? - 超级简单的仅供参考

标签: html css apache twitter-bootstrap-3 center


【解决方案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>

【讨论】:

  • 谢谢!现在他们在同一高度!如何让“

    ”文字不那么展开,如何让它更紧凑?

  • 是的,那么您必须为 &lt;p&gt; 标签 - p { width: 50%; margin: auto; } 提供这些样式。我仍然建议使用 flexbox。避免所有这些额外的变化。 :-) 希望你得到你的答案
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-30
  • 1970-01-01
  • 2017-05-11
  • 1970-01-01
相关资源
最近更新 更多