Materializecss div垂直居中
Tho*_*hom 1 html css materialize
我正在使用materializecss,我希望我的DIV垂直居中,干净,也许是物质化的方式？
<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>这就是我要的: 
为了使valign-wrapper工作,容器本身必须有一些高度.大多数只是崩溃到内容高度.您可以将高度设置为某个固定值,也可以使用百分比.但是如果你使用百分比,你需要确保你的容器容器也有一些高度.
在这个例子中,我展示了如何在以下内容中垂直对齐body:
所以,如果你设置html和body高度100%:
html, body, .my-wrapper {
height: 100%;
}
注意除了我自己的包装类之外,我如何设置html和body100%.
现在我可以添加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齐头并进.
我创造了这个 example on Fiddle for you
(ps:必须有一个flex-box版本来做这个)
| 归档时间： |
|
| 查看次数： |
18676 次 |
| 最近记录： |