我正在尝试对齐使用MaterializeCSS库创建的行中的容器。The documentation似乎没有提到任何关于将已经在行中的对象居中的内容,所以我想我应该在这里问一下。
当前代码:
<div class="container" style="width: 88%;height: 100%;max-width: 100%;margin: auto;">
<div class="row" style="width: 100%;height: 100%;">
<div class="col s6 center-align" id="extra-pic-container">
<img id="extra-pic" width="100%" src="img1.png">
</div>
<div class="col s6 center-align" id="extra-pic-container">
<img id="extra-pic" width="100%" src="img2.png">
</div>
<div class="col s6 center-align" id="extra-pic-container">
<img id="extra-pic" width="100%" src="img3.png">
</div>
</div>
现在看起来是这样的:
我想要的(草图):
有没有什么CSS魔术可以实现呢?
非常感谢。
发布于 2018-06-04 07:05:41
您可以考虑使用flex box技术。
.flexbox {
display: flex;
flew-wrap: wrap;
justify-content: center;
align-items: center;
}
<div class="container" style="width: 88%;height: 100%;max-width: 100%;margin: auto;">
<div class="row" style="width: 100%;height: 100%;">
<div class="flexbox">
<div class="col s6 center-align" id="extra-pic-container">
<img id="extra-pic" width="100%" src="img1.png">
</div>
<div class="col s6 center-align" id="extra-pic-container">
<img id="extra-pic" width="100%" src="img2.png">
</div>
<div class="col s6 center-align" id="extra-pic-container">
<img id="extra-pic" width="100%" src="img3.png">
</div>
</div>
</div>
发布于 2020-10-27 16:53:11
Materialize CSS在一个网格中有12列。可以使用offset从左侧或起点跳过任意数量的列。
<div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>
发布于 2019-06-01 02:49:27
在col.div上,您需要设置:
float: none;
margin: 0 aut;
https://stackoverflow.com/questions/50671682
复制相似问题