.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!
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.