我正在创建一个本地网页,但遇到了一些问题 - 我试图将我的框居中,但我尝试过的任何东西都不起作用。 我有 2 个部分 - 第一个稍微向右对齐,而第二个稍微向左对齐(只粘贴了第一部分的代码)。
我尝试过使用 margin: auto 和许多我不记得的其他东西,因为我已经尝试解决这个问题一段时间了。
<div class="main-container">
<div class="services">
<div class="heading">
<h2>Services</h2>
</div>
<div class="box">
<div class="service-icon">
<i class="fas fa-expand-arrows-alt"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="far fa-smile"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="far fa-comments"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="far fa-user"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="fas fa-gift"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
</div>
</div>
.services {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 420px;
border-top: 5px solid hsla(134, 97%, 14%);
flex-wrap: wrap;
}
/* Box titles */
.heading {
display: inline;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
position: relative;
color: hsl(134, 97%, 14%);
float: left;
top: 20px;
left: 150px;
}
.box {
display: block;
-ms-flex-pack: distribute;
justify-content: space-around;
height: 200px;
width: 190px;
border: 3px solid hsl(356, 97%, 29%);
margin: 75px 40px;
padding: 15px 15px;
border-radius: 10px;
color: hsl(134, 97%, 14%);
}
.box h3, .box p {
text-align: center;
margin-top: 10px;
}
.service-icon {
text-align: center;
}
.service-icon i {
font-size: 30px; line-height: normal;
}
最佳答案
标题 div 是 div class="services"
的子元素,它“循环”出所有子元素。
我稍微调整了标记。
将标题移出了服务 div
并删除了 float
属性。
最后,我将边框改为 .main-container
类。
这是否解决了您的问题? :)
.main-container {
border-top: 5px solid hsla(134, 97%, 14%);
}
.services {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 420px;
flex-wrap: wrap;
}
/* Box titles */
.heading {
display: inline;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
position: relative;
color: hsl(134, 97%, 14%);
top: 20px;
left: 150px;
}
.box {
display: block;
-ms-flex-pack: distribute;
justify-content: space-around;
height: 200px;
width: 190px;
border: 3px solid hsl(356, 97%, 29%);
margin: 75px 40px;
padding: 15px 15px;
border-radius: 10px;
color: hsl(134, 97%, 14%);
}
.box h3, .box p {
text-align: center;
margin-top: 10px;
}
.service-icon {
text-align: center;
}
.service-icon i {
font-size: 30px; line-height: normal;
}
<div class="main-container">
<div class="heading">
<h2>Services</h2>
</div>
<div class="services">
<div class="box">
<div class="service-icon">
<i class="fas fa-expand-arrows-alt"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="far fa-smile"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="far fa-comments"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="far fa-user"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
<div class="box">
<div class="service-icon">
<i class="fas fa-gift"></i>
</div>
<h3>some text</h3>
<p>some text</p>
</div>
</div>
</div>
关于html - 如何使用 Flexbox 将盒子居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54744905/