How to use p class and flexbox together-CodePudding

I have four flexed container boxes. I want to put text underneath these boxes in a row.

Any ideas on how I could put these evenly in a row under these containers, as well as any tips to clean up code would be appreciated.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

p {}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
</div>

<div >
  <p >
    <div >
      Wow !
    </div>
    <div >
      Wow !
    </div>
    <div >
      Wow !
    </div>
    <div >
      Wow !
    </div>
</div>

CodePudding user response：

I would bundle the boxes and the text. You can keep it separate, but this is less likely to have problems and results in tidier markup.

.container {
  display: flex;
  /* flex-direction: row; - not needed (default) */
  justify-content: space-around;
  align-items: center;
}

.container>div {
  flex: 1;
  text-align: center;
}

.square {
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

<div >
  <div>
    <div ></div>
    <p>Paragraph 1.</p>
  </div>

  <div>
    <div ></div>
    <p>Paragraph 2.</p>
  </div>

  <div>
    <div ></div>
    <p>Paragraph 3.</p>
  </div>

  <div>
    <div ></div>
    <p>Paragraph 4.</p>
  </div>
</div>

CodePudding user response：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

<div >
  <div >Wow !</div>
  <div >Wow !</div>
  <div >Wow !</div>
  <div >Wow !</div>
</div>

<p>This is a sample line below the boxes</p>

CodePudding user response：

Add CSS position absolute to paragraph elements and position relative to parent element.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position:relative;
}

p {
  
  position:absolute;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>
</div>

<div >
  <p >
    <div >
      Wow !
    </div>
    <div >
      Wow !
    </div>
    <div >
      Wow !
    </div>
    <div >
      Wow !
    </div>
</div>

CodePudding user response：

You can put them in invisible elements to group them and use text-align: center. Here's an example.

.flexbox {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

.flexbox article {
  text-align: center;
}

.flexbox div {
  font-size: 4em;
  background-color: #4caf50;
  color: #fff;
  width: 96px;
}

<div >
  <article><div id="box1">1</div><p>One</p></article>
  <article><div id="box2">2</div><p>Two</p></article>
  <article><div id="box3">3</div><p>Three</p></article>
  <article><div id="box4">4</div><p>Four</p></article>
</div>