时间戳

首页 > 解决方案 > 如何使用 flexbox 模型 css 将所有 div 元素居中在一个 flex 项目中？

html - 如何使用 flexbox 模型 css 将所有 div 元素居中在一个 flex 项目中？

问题描述

我是前端开发的新手，我现在正在研究 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>

标签： htmlcssflexbox

解决方案

这是答案：

* {
    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:auto;
}
.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;
    margin:auto;
}
<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>

推荐阅读