Materializecss div 垂直居中

Question

新手上路，请多包涵

我正在使用 materializecss 并且我希望我的 DIV 以干净且可能是 materializecss 的方式垂直居中？

 <div class="container">
    <div class="row">
        <div class="col s12  infobox center">
            <div class="col s6">
                <div class="card grey darken-3">
                    <div class="card-content white-text">
                        <span class="card-title">BOX 1</span>
                        <p>BOX 1</p>
                    </div>
                </div>
            </div>
            <div class="col s6">
                <div class="card grey darken-3">
                    <div class="card-content white-text">
                        <span class="card-title">BOX 2</span><br>
                        <p>BOX 2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这就是我要的：

原文由 user5681247 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css materialize

阅读 251

1 个回答

得票最新

社区维基

1

发布于
2022-12-20

要使 valign-wrapper 工作，容器本身必须有一定的高度。大多数只是折叠到内容高度。您可以将高度设置为某个固定值，也可以使用百分比。但是如果你使用百分比，你需要确保你的容器容器也有一定的高度。

在这个例子中，我展示了如何让一些东西在 body 中垂直对齐：

因此，如果将 html 和 body 设置为高度 100%：

 html, body, .my-wrapper {
  height: 100%;
}

请注意，除了我自己的包装类之外，我是如何将 html 和 body 都设置为 100% 的。

现在我可以将 valign-wrapper 添加到我的容器中，你会看到它的内容居中：

 <body>
    <div class="my-wrapper valign-wrapper center-align">
        ... content to be vertically aligned ...
    </div>
</body>

关键是你的容器必须有一个高度，否则它不起作用。您可以自己设置高度，也可以像本例中那样让布局处理它。

更新

_使用网格类水平居中_。

您可以结合使用网格大小和偏移量将内容放在中心（或您喜欢的位置）：

 <body>
    <div class="my-wrapper valign-wrapper center-align">
        ... content to be vertically aligned ...
        <div class="row">
            <div class="col s12 m8 offset-m2 l6 offset-l3>
               ... content centered 6 wide on large ...
               ... content centered 8 wide on medium ...
               ... content centered 12 wide on small ...
            </div>
        </div>
    </div>
</body>

请注意 row 和 col 齐头并进。

我 在 Fiddle 上为你创建了这个例子

（ps：必须有一个 flex-box 版本来做这个）

原文由 Michael 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

Materializecss div 垂直居中

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译