MaterializeCSS行中的项目居中对齐
MaterializeCSS行中的项目居中对齐
提问于 2018-06-04 06:50:38
我正在尝试对齐使用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魔术可以实现呢？
非常感谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 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>Stack Overflow用户
发布于 2019-06-01 02:49:27
在col.div上，您需要设置：
float: none;
margin: 0 aut;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50671682
复制相关文章
相似问题