html - 如何使用 Flexbox 使盒子居中?
问题描述
我正在创建一个本地网页,但遇到了一些问题 - 我正在尝试将我的框居中,但我尝试过的没有任何效果。我有 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>
推荐阅读
- php - With & WhereHas 返回空的嵌套关系
- python - NoReverseMatch at /availability/1/edit/ 为“availability_list”反向,未找到任何参数。试过:['可用性\\/(?P
[0-9]+)\\/list$'] - dart - 如何进行嵌套查询或仅查找 Aqueduct dart 中是否存在外键
- mysql - Laravel 使用具有 3 列或更多列的数据透视表
- java - 无法在 iFrame 中找到元素
- ios - 将项目添加到表格视图时遇到问题
- javascript - 如何将 externalHeight() 的结果转换为 REM?
- algorithm - 通过根据重量+强度之和对它们进行排序的盒子堆叠问题
- c++ - 如何将两个代码组合成一个函数?
- docker - 没有“主机”nework_mode 的 Docker 容器中的蓝牙加密狗访问