How do I put multiple images in columns with centered text under them?-CodePudding

I'd like to put images with centered text underneath each image in columns, I'd also like to size the images to a specific width and height each and I also want to make it so that when the text gets too long the text gets split into 2 lines, but I dont want it to move the image up and down at the same time. What code should I use? I used some code I found on the internet which is linked below but that didn't work as I expected it to (the code can be found below). Thanks!

So far, I've used this code but it doesn't center the text and also skips spots which I don't want to happen. Please check the image I've attached to see the skipped spotsskipped spot

HTML
<div >
<img src="extra/road96.jpg" alt="Road 96"style="width:180px;height:180px;"/\>
<a class='neon-button' href='https://www.mediafire.com/file/4a05b4tkaal5e50/Road_96.zip/file'\>Road 96
<a/>
<div/>

CSS
    .column {
float: left;
width: 13.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
}
.sjamg {
text-align: justify;
width: [width of img];
}
.sjamg img {
display: block;
margin: 0 auto;
    }

CodePudding user response：

try using flex, and by using flex-direction change the direction of the container's items to Column

.main-container {
display: flex;
width: 100%;
height: 100vh;
flex-direction: Column;
justify-content: space-evenly;
}

.main-container p {
margin-left: 64px;
height: 5%;
width: auto;

}


.small-container {
height: 180px;
width: 180px;
background-color: blue;
}

<!DOCTYPE html>
<html>

<body>
    <div >
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
    </div>

</body>

</html>

CodePudding user response：

Try this:

.main-container {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.mycolumn {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-evenly;
}

.main-container p {
  margin: auto;
  height: 5%;
  width: auto;
}

.small-container {
  height: 180px;
  width: 50%;
  background-color: red;
  margin: auto;
}

<!DOCTYPE html>
<html>
  <body>
    <div >
      <div >
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
      </div>
      <div >
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
      </div>
      <div >
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
      </div>
      <div >
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
        <div ></div>
        <p> your text </p>
      </div>
    </div>
  </body>
</html>