首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在HTML引导程序中对2 div进行居中?

如何在HTML引导程序中对2 div进行居中?
EN

Stack Overflow用户
提问于 2016-09-16 14:55:01
回答 1查看 130关注 0票数 0

正如标题所述,我如何完美地将两个div中心放在一起?

我的HTML:(或者说,有一点)

代码语言:javascript
复制
<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

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-16 15:13:21

要实现这一点,实际上有很多不想要的样式,您只需在team-centered类上使用下面的代码。删除row-centered类。它应该是这样的

CSS

代码语言:javascript
复制
.team img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 10px auto 40px;
}
.team-centered {
  width: 50%;
  float:left;
  text-align: center;
}

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39534489

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档