我无法让我的3个div成为中心。它们看起来几乎居中,但右侧的空白区域比左侧还多。我包括我的html和css以及该网站的链接。
http://alexrdzv2.herokuapp.com/index.html
而且,当我使窗户变大时,它变得更糟。
我应该提一下,它所包装的容器只有以下属性 - 宽度:80%,边距:自动,溢出:隐藏。我的页面中的所有部分都包含在这个容器中,但我知道这不是问题,因为我已经尝试过没有它而且盒子仍然无法正确居中。
#boxes {
min-height: 200px;
margin-top: 20px;
}
#boxes .box {
margin-top: 20px;
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .fab {
padding: 0 5px;
}
<section id="boxes">
<div class="container">
<div class="box">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
</div>
<div class="box">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
</div>
<div class="box">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
</div>
</div>
</section>
你可以使用flexbox
CSS3功能为你的盒子居中,为此你需要在你的container
类中添加下面的CSS。
.container {
display: flex;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
}
#boxes {
min-height: 200px;
margin-top: 20px;
}
#boxes .box {
margin-top: 20px;
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .fab {
padding: 0 5px;
}
<section id="boxes">
<div class="container">
<div class="box">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
</div>
<div class="box">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
</div>
<div class="box">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
</div>
</div>
</section>
如果您愿意使用该库,则可以非常轻松地使用Bootstrap来完成。您可以简单地将行类添加到容器div,并将col-md-3添加到每个div元素。 bootstrap中的行宽度为12'单位',因此col-md-3是具有可用宽度的三分之一的列。
<section id="boxes">
<div class="container row">
<div class="box col-md-3">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
</div>
<div class="box col-md-3">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
</div>
<div class="box col-md-3">
<i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
<h1><a href="">Color Game</a></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
</div>
</div>
</section>
可以在此处找到有关bootstrap中此主题的更多文档:https://getbootstrap.com/docs/4.1/layout/grid/
可以在这里找到可下载的bootstrap文件:https://getbootstrap.com/docs/4.1/getting-started/download/
虽然Bootstrap不是唯一的解决方案,但它是我更喜欢使用的解决方案。