Question 340321 in Html Question posted in
Some basic documentation can be found here.

Html – justify-content: space-around does not work

My output with three pictures does not space around. I want to be like it. how to make them in the middle of the web? I am new in html and css.

enter image description here

.container {
  width: 1555x;
  margin: 20px;
  justify-content: space-around;
}

.column {
  width: 440px;
  height: 325px;
  margin-right: 20px;
  padding: 20px;
}

img {
  width: 100%;
  height: auto;
}
<div class="container">
  <div class="column">
    <img src="/task1/assets/img1.png" alt="Car Salesman">
    <img src="/task1/assets/img2.png" alt="Family">
    <img src="/task1/assets/img3.png" alt="Pottery">
  </div>
</div>
Tags:

2

Answers


  1. 0

    You should make the column a flex.
    Since the images are the children’s of the column.
    Please find this CSS changes

    .container {
    width: 1555x;
    margin: 20px;
  }
.column {
    width: 440px;
    height: 325px;
    margin-right: 20px;
    display:flex;
    justify-content: space-around;
    padding: 20px;
  }

 img {
    width: 100%;
    height: auto;
  }
    Login or Signup to reply.
  2. 0

    You can achieve the expected output by using given, hope it helps.

    .main-container {
    display:flex;
    justify-content:center;
}
  
.column {
    display:flex;
}

img {    
    max-width: 440px;
    width: 100%;
    height: 325px;
    margin-right: 20px;
    padding: 20px;
 }
 
 img:last-child{
  margin:0;
 }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="imagesheet" href="index.css">
</head>
<body>
    <div class="main-container">
        <div class="column">
          <img src="https://placehold.co/600x400" alt="Car Salesman">
          <img src="https://placehold.co/600x400" alt="Family">
          <img src="https://placehold.co/600x400" alt="Pottery">
        </div>
    </div>
    
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search