I am using the materializecss for developing a html web app.
I am struggling using their helpers. I am trying to center my number and text:
For a better look at my code:
@import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';
<div class="row">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center" >
<div class="row">
<h3 class="center-align orange-text text-darken-2"> 406 </h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center" >
<div class="row">
<h3 class="center-align orange-text text-darken-2"> 26 </h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
You are using the class center
:
<div class="card-content valign center">
That class just adds text-align: center
. That is, it centers inline content inside that block, but doesn't center the block itself.
To do that, you should use the class center-block
instead:
<div class="card-content valign center-block">
That class sets margin-left
and margin-right
to auto
. That centers the block (or the flex item, in this case; see 8.1. Aligning with auto margins).
@import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';
<div class="row">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block" >
<div class="row">
<h3 class="center-align orange-text text-darken-2"> 406 </h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block" >
<div class="row">
<h3 class="center-align orange-text text-darken-2"> 26 </h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
You can do that by centering the .card-content
div like this:
.card .card-content {
margin: 0 auto;
}
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