Cant Centro di testo con materializecss

Sto usando la materializecss per lo sviluppo di un html di web app.

Io sto lottando utilizzando i loro aiutanti. Sto cercando di centrare il mio numero e testo:

Cant Centro di testo con materializecss

Per osservare meglio il mio codice:

CSS:

@import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';

HTML:

<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>
InformationsquelleAutor Mike | 2015-07-03

 

2 Replies
  1. 14

    Si utilizza la classe center:

    <div class="card-content valign center">

    Classe che aggiunge solo text-align: center. Che è, centri di contenuto in linea all’interno di tale blocco, ma non centro il blocco stesso.

    Per fare questo, si dovrebbe utilizzare la classe center-block invece:

    <div class="card-content valign center-block">

    Che classe imposta margin-left e margin-right per auto. Che centri il blocco (o flex elemento, in questo caso; vedere 8.1. L’allineamento con margini automatici).

    CSS:

    @import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css';

    HTML:

    <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>

Lascia un commento