Menu
I'm using materializecss and i want my DIV to be vertically centered the clean and maybe materializecss way?
<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>This is what i want: 
To make valign-wrapper work the container itself must have some height. Most just collapse to the content height. You can either set the height to some fixed value or you can use percentages. But if you use percentages you need to make sure that your containers container also have some height.
In this example I'm showing how to make something vertically aligned inside the body:
So if you set html and body to height 100%:
html, body, .my-wrapper {
height: 100%;
}
Notice how I set both html and body to 100% in addition to my own wrapper class.
Now I can add the valign-wrapper to my container and you'll see that it's content get's centered:
<body>
<div class="my-wrapper valign-wrapper center-align">
... content to be vertically aligned ...
</div>
</body>
The point is your container must have a height otherwise it doesn't work. You can set the height yourself or let the layout handle it like in this case.
Updated
Horizontal centering using grid classes.
You can use a combination of grid sizes and offset to put content in the center (or where you fancy it):
<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>
Notice that row and col goes hand in hand.
I created this example on Fiddle for you
(ps: there must be a flex-box version of doing this as well)
162
In order to verticaly align a div,section or a part of design using materialize you should add height to .valign-wrapper as you can see here: materializecss
Demo: demo
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
