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

Question

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:

How can to center "img_list" as below:

Note: i had edit css of "main":

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

Result: Zoom = 100%:

If I zoom out, zoom in , it still align left:

I want it center as:

Does this answer your question? [How can I horizontally center an element?](https://stackoverflow.com/questions/114543/how-can-i-horizontally-center-an-element) — André, Mar 13 '23 at 05:14
Can you also include your image assets in the example? Are you trying to achieve a centered layout that wraps the content if it exceeds its parent width? — Joshua, Mar 13 '23 at 06:04

score 0 · Answer 1 · answered Mar 13 '23 at 05:40

0

simply replace this it should work for you

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

answered Mar 13 '23 at 05:40

Shahbaz Iqbal

1
2

I try change css of main class, result updated in my question. – D T Mar 13 '23 at 05:44
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 17 '23 at 15:01

faiza07 · Answer 2 · 2023-03-13T06:25:43.830

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.

edited Mar 13 '23 at 06:25

answered Mar 13 '23 at 06:00

faiza07

36
2

No, i don't want display in one line, i want auto break line, if not enough width and all images can center. – D T Mar 13 '23 at 06:04
Okay, I have updated my answer. Hope this is what you are looking for. – faiza07 Mar 13 '23 at 06:12

score 0 · Answer 3 · edited Mar 13 '23 at 12:31

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
}

edited Mar 13 '23 at 12:31

General Grievance

4,555
31
31
45

answered Mar 13 '23 at 06:33

Deva

97
2

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

3 Answers3