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

How can fit width of div to content and center parent div? – Html

This is my HTML and CSS:

.main {
  float: left;
  justify-content: center;
}

.img_list {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.img_item {
  padding-top: 10px;
  display: inline-block;
}
<div class="main">
  <div class="img_list">
    <div class="img_item">
      <p>＜Hinh 1＞</p>
      <img src="../a/1.jpg" />
    </div>
    <div class="img_item">
      <p>＜Hinh 2＞</p>
      <img src="../a/1.jpg" />
    </div>
    <div class="img_item">
      <p>＜Hinh 3＞</p>
      <img src="../a/1.jpg" />
    </div>
    <div class="img_item">
      <p>＜Hinh 4＞</p>
      <img src="../a/1.jpg" />
    </div>
  </div>
</div>

This is target result:

enter image description here

How can to center "img_list" as below:
enter image description here

Note: i had edit css of "main":

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

Result:
Zoom = 100%:
enter image description here

If I zoom out, zoom in , it still align left:
enter image description here

I want it center as:
enter image description here

Tags:

3

Answers


  1. 0

    simply replace this it should work for you

    .main{
    display: flex;
    justify-content: center;
}
    Login or Signup to reply.
  2. 0

    The reason that content moves to left on small screen is because the screen width gets small and therefore the last image gets pushed to the next line.
    I have updated my answer.

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

.img_list {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  text-align: center;
}

.img_item {
  padding-top: 10px;
  display: inline-block;
}

    Hope this helps.

    Login or Signup to reply.
  3. 0 
    .main {
  width: 80%;
  margin: auto;
}

.img_list {
  display: flex;
  flex-warp: wrap;
  text-align: center;
}

.img_item {
  Width: auto;
  gap: 10px; //if want space add this css
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search