![](/img/trans.png)
[英]Why wont my button center in a div? The button is in a wrapper that has text-align:center
[英]why my div keep on the side and wont center
.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>
有人可能知道为什么我的 div 不去中心并保持在一边? 无论我用边距写什么或对齐它,都保持在一边(在主体 CSS 上,我已经指定了direction: rtl;
如果有的话。
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%;
}
}
谢谢大家的帮助!
据我所知,您希望您的“列”div 居中在行 div 内。 我会建议你学习 flex-box 和 grid ,这会让事情变得更容易。 我在你的“.row”类中只添加了两行代码
1.显示:弹性
2.justify-内容:中心
下面是我的解决方案。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.