为什么我的 div 保持在一边并且不会居中

Question

 .row { display: flex; flex-wrap: wrap; padding: 0 4px; } .column { flex: 25%; max-width: 25%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; width: 100%; } @media screen and (max-width: 800px) { .column { flex: 50%; max-width: 50%; } } @media screen and (max-width: 600px) { .column { flex: 100%; max-width: 100%; } }

 <table align="center"> <tr> <td align="center"> <div class="row"> <div class="column"> <img src="pics/photos/sample1.png"> <img src="pics/photos/sample2.png"> <img src="pics/photos/sample3.png"> </div> <div class="column"> <img src="pics/photos/sample4.png"> <img src="pics/photos/sample5.png"> <img src="pics/photos/sample6.png"> </div> <div class="column"> <img src="pics/photos/sample7.png"> <img src="pics/photos/sample8.png"> <img src="pics/photos/sample9.png"> </div> </div> </td> </tr> </table>

Someone maybe know why my div isn't go to the center and keep stay on the side? No matter what I writing with margin or align it keep stay on the side (on the body CSS I've putted direction: rtl; if that matter.

HTML:

<table align="center">
                <tr>
                    <td align="center">
                        <div class="row">
                            <div class="column">
                              <img src="pics/photos/sample1.png">
                              <img src="pics/photos/sample2.png">
                              <img src="pics/photos/sample3.png">
                            </div>
                            <div class="column">
                                <img src="pics/photos/sample4.png">
                                <img src="pics/photos/sample5.png">
                                <img src="pics/photos/sample6.png">
                            </div>
                            <div class="column">
                                <img src="pics/photos/sample7.png">
                                <img src="pics/photos/sample8.png">
                                <img src="pics/photos/sample9.png">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>

CSS:

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

Thank you all for the help!

Answer 1

from what I can understand you want your "column" divs to be centered inside row div. I will suggest you to learn flex-box and grid which makes thing easier. I have added only two lines of code in your ".row" class

1.display:flex

2.justify-content:center

Below is my solution.

 .row { display: flex; flex-wrap: wrap; padding: 0 4px; display: flex; justify-content: center; } .column { flex: 25%; max-width: 25%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; width: 100%; } @media screen and (max-width: 800px) { .column { flex: 50%; max-width: 50%; } } @media screen and (max-width: 600px) { .column { flex: 100%; max-width: 100%; } }

 <table align="center"> <tr> <td align="center"> <div class="row"> <div class="column"> <img src="pics/photos/sample1.png"> <img src="pics/photos/sample2.png"> <img src="pics/photos/sample3.png"> </div> <div class="column"> <img src="pics/photos/sample4.png"> <img src="pics/photos/sample5.png"> <img src="pics/photos/sample6.png"> </div> <div class="column"> <img src="pics/photos/sample7.png"> <img src="pics/photos/sample8.png"> <img src="pics/photos/sample9.png"> </div> </div> </td> </tr> </table>