gpt4 book ai didi

html - 如何在 HTML Bootstrap 中将 2 个 div 居中?

转载 作者:行者123 更新时间:2023-11-28 05:11:22 25 4
gpt4 key购买 nike

如标题所述,如何将两个 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:(这里也一样,这不是全部)

I tried to make a box for the css above too but it didn't work. http://pastebin.com/SzhAmh3f

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

最佳答案

实际上有很多不需要的样式可以实现这一点,您只需要在 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 - 如何在 HTML Bootstrap 中将 2 个 div 居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39534489/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com