【发布时间】：2021-11-27 18:39:52
【问题描述】：
我是前端开发的新手，我现在正在研究 HTML/CSS flexbox 模型。
所以我正在做一个项目。
我有一个 main-contant div 作为 flex 容器。在这个弹性容器内，我有 3 个盒子。这些盒子中的每一个也是一个 flex 容器，以 3 个 div 容器为一列。
我的任务是将这 3 个框内的所有元素居中。当我为这 3 个容器中的每一个添加一个 text-align 属性时，只有 div 内的前 2 个容器居中，但最后一个带有按钮的容器没有。
我不知道如何解决它。
* {
box-sizing: border-box;
/* margin: 0; */
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
/* background-color: rgb(223, 255, 133); */
}
.main-content {
width: 800px;
height: 500px;
/* background-color: blueviolet; */
margin-left: auto;
margin-right: auto;
margin-top: 40px;
display: flex;
}
.main-content__feature {
display: flex;
flex-direction: column;
/* background-color:burlywood; */
flex-grow: 1;
justify-content: space-between;
text-align: center;
}
.main-content__feature-dark {
background-color: darkblue;
background-image: linear-gradient(0deg, rgb(81, 172, 247), rgb(126, 248, 143));
border-radius: 0 0 15px 15px;
}
h2 {
/* text-transform: uppercase; */
color: rgb(0, 0, 156);
}
.main-content__font-p {
font-size: 20px;
color:rgb(0, 0, 190);
}
.main-content__font-p-price {
color:rgb(80, 185, 150);
font-size: 23px;
font-weight:800;
}
.main-content__font-p-italic {
font-style: italic;
font-weight: 600;
color: rgb(0, 0, 190);
}
.main-content__button-1 {
width: 160px;
height: 40px;
border-radius: 20px;
background-color: rgb(61, 201, 189);
text-align: center;
color: white;
padding-top: 10px;
text-transform: uppercase;
font-size: 13px;
box-shadow: 0 3px 3px #777777;
margin-bottom: 10px;
}
.main-content__button-2 {
width: 160px;
height: 40px;
border-radius: 20px;
/* background-color: rgb(61, 201, 189); */
text-align: center;
color: rgb(61, 201, 189);
padding-top: 10px;
border: 1px solid rgb(61, 201, 189);
text-transform: uppercase;
font-size: 13px;
box-shadow: 0 3px 3px #777777;
}<body>
<div class="main-content">
<div class="main-content__feature">
<div class="main-content__description">
<h2 style="text-transform: uppercase;">SMD</h2>
<h2>Basic</h2>
<p class="main-content__font-p">6 months program</p>
<p class="main-content__font-p-price">$595</p>
</div>
<div class="main-content__servises main-content__font-p-italic">
<p>2 physician visits</p>
<p>12 coaching segments</p>
<p>24 programm worksheet</p>
</div>
<div class="main-content__buttons">
<div class="main-content__button-1">BUY NOW</div>
<div class="main-content__button-2">Programm details</div>
</div>
</div>
<div class="main-content__feature main-content__feature-dark">
<div class="main-content__description">
<h2 style="text-transform: uppercase;">SMD</h2>
<h2>Basic</h2>
<p>6 months programm</p>
<p>$595</p>
</div>
<div class="main-content__servises">
<p>2 physician visits</p>
<p>12 coaching segments</p>
<p>24 programm worksheet</p>
</div>
<div class="main-content__buttons">
<div class="main-content__button-1">Buy NOW</div>
<div class="main-content__button-2">Programm details</div>
</div>
</div>
<div class="main-content__feature">
<div class="main-content__description">
<h2>SMD</h2>
<h2>Basic</h2>
<p>6 months programm</p>
<p>$595</p>
</div>
<div class="main-content__servises">
<p>2 physician visits</p>
<p>12 coaching segments</p>
<p>24 programm worksheet</p>
</div>
<div class="main-content__buttons">
<div class="main-content__button-1">Buy NOW</div>
<div class="main-content__button-2">Programm details</div>
</div>
</div>
</div>
</body>【问题讨论】：
-
您还没有将
main-content__buttons中的任何内容居中 -
添加到
.main-content__button-1和.main-content__button-2margin: 0 auto 10px auto; -
main-content__buttons 在 div class="main-content__feature. main-content__buttons 没有。