How to position text under image column?-CodePudding

How do I make it so that where the text is, it is just white space and the text instead goes under the picture? Heres an image of what the code is doing on the site: https://i.stack.imgur.com/PAwLN.jpg

Heres my current CSS for the image grid setup: `

.column{ float: left; width: 33.3%; padding:5px;} .column img{height: 370px; width:300px}

CodePudding user response：

you can make your code like this,

.img-container{
  display: flex;
  justify-content: space-evenly;
}

.img-card img{
  border: solid black 1px;
  margin: 10px;
  width: 200px;
}

.img-card p{
  text-align: center;
  margin-top: -10px;
}

<html>
  <body>
  <div >
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
      <p>Message</p>
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
      <p>Message</p>
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
       <p>Message</p>
    </div>
  </div>
  </body>
</html>

CodePudding user response：

I'm trying to understand what you mean, but if it's about layouts you better learn about css grid https://www.w3schools.com/css/css_grid.asp https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.container{
  display: grid;
  grid-template-columns: auto auto auto;
}

.image > img{
  width: 200px;
  height: 150px;
}

<div >
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum molestiae quasi incidunt esse quisquam reiciendis error cum ea quos doloremque.</div>