using css to center images-CodePudding

I wish to put the images and text into rows. I tried flex-direction to see if I can flip it, and I tried controlling it vertically with align-item but all that happens was the container moving to the left side.

body {
  font-family: 'Courier New', Courier, monospace;
}

img {
  width: 100px;
  height: 100px;
}

.title {
  font-size: 36px;
  font-weight: 900;

}

/* do not edit this footer */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}
body{

  text-align:center;

}
.container{
 display: flex;
  justify-content: center;
  gap: 52px;}
  
.in{
  
  max-width: 200px;

}
.title{
  margin-bottom: 32px;
}

<!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>Information</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div >Information!</div>
<div >
    <div >
    <img src="./images/barberry.png" alt="barberry">
    <div >This is a type of plant. We love this one.</div>
<div >
    <img src="./images/chilli.png" alt="chili">
    <div >This is another type of plant. Isn't it nice?</div>
<div >
    <img src="./images/pepper.png" alt="pepper">
    <div >We have so many plants. Yay plants.</div>
<div >
    <img src="./images/saffron.png" alt="saffron">
    <div >I'm running out of things to say about plants.</div>

    <!-- disregard this section, it's here to give attribution to the creator of these icons -->
    <div >
      <div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
    </div>
</div>
</div>
</div>
    </div>
  </body>
</html>

CodePudding user response：

you just put the tag wrong in the code above. try to fix and place the image and text on one line .

CodePudding user response：

Your code have a mistake and that is you haven't closed the div.in tags properly, and I hope this will fix the problem

CodePudding user response：

I think you have 2 extra at the end that are not closing any tag, if you want to use the div.in as rows, you should assing a width to the container first

.container{ diplay:flex; gap: 52px; width: 100%; justify-content:center; flex-wrap: wrap}

And finally, take out the footer form the container, because it is positioned absolute, it doesn't make sense to lose its properties because of being a child of a flex tag