使用 Flexbox 在 div.box 下定位文本答案

【问题标题】：Position text under a div.box using Flexbox使用 Flexbox 在 div.box 下定位文本
【发布时间】：2022-11-17 23:43:13
【问题描述】：

我正在努力尝试使用 Flexbox 复制 this。目前我的结果看起来像this。

这是受影响的代码：

<div class="box-container">
        <div class="box">
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div class="box">
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div class="box">
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div class="box">
          <p>this is some subtext under an illustration or image</p>
        </div>
      </div>

.box-container {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.box {
  height: 160px;
  width: 155px;
  border: 3px solid #3882f6;
  border-radius: 10px;
}

我似乎无法弄清楚如何正确对齐/定位文本框下方的文本。

我已经尝试过不将框类与段落嵌套，但文本只是挂在框旁边而不是在它下面。我尝试调整容器的边距和宽度但没有成功。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

.box-container {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.box {
  height: 160px;
  width: auto;
  border: 3px solid #3882f6;
  border-radius: 10px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
}

<div class="box-container">
        <div class="wrapper">
          <div class="box">
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div class="wrapper">
          <div class="box">
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div class="wrapper">
          <div class="box">
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div class="wrapper">
          <div class="box">
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
      </div>

您需要为这两个元素添加一个父元素，然后将文本居中并让孩子占据其父宽度的 100% 我相信这可以解决问题

【讨论】：