Position text under a div.box using Flexbox-CodePudding

I'm struggling trying to replicate this using Flexbox. My result looks like this for the moment.

Here is the affected code :

<div >
        <div >
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div >
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div >
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div >
          <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;
}

I just can't seem to figure out how to properly align/position the text under my boxes.

I already tried not nesting the box class with the paragraph but then the text is just hanging next to the box and not under it. I tried to play with margin and width of the container but without success.

CodePudding user response：

.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 >
        <div >
          <div >
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div >
          <div >
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div >
          <div >
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
        <div >
          <div >
          </div>
          <p>this is some subtext under an illustration or image</p>
        </div>
      </div>

You need to add a parent element for both elements and then just center the text and let the child take 100% of his parent width I believe this solves the issue

CodePudding user response：

Here you can try this logic :

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

    .box-holder {
      display: flex;
      flex-direction: column;
      height: auto;
      width: auto;
      text-align: center;
      height: 240px;
      width: 155px;
    }

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
   
  </style>
  <body>
    <div >
      <div >
        <div ></div>
        <p>this is some subtext under an illustration or image</p>
      </div>
      <div >
        <div ></div>
        <p>this is some subtext under an illustration or image</p>
      </div>
      <div >
        <div ></div>
        <p>this is some subtext under an illustration or image</p>
      </div>
      <div >
        <div ></div>
        <p>this is some subtext under an illustration or image</p>
      </div>
    </div>
  </body>
</html>