Comment centrer la base du corps du bloc 6?

Question

J'ai créé une page base.html pour étendre à mes autres pages, mais, peu importe ce que j'essaie, je ne peux pas centrer le contenu dans le {% block body%} Est-ce que quelqu'un peut voir où est le problème? J'utilise foundation 6, et je n'ai rien modifié dans app.css. Dites-moi si vous avez besoin de plus d'informations.

{% block body %} 

<div class="row"> 
    <div class="large-3 large columns"></div> 
     <div class="large-6 large-centered columns"> 

      <h1>CONTENT FROM OTHER PAGES</h1> 
      <p>Here is some content.</p> 

     </div> 
<div class="large-3 large columns"></div> 
</div> 

{% endblock %} 

Answer 1

Si vous utilisez Foundation 6 alors je vous conseille de vider le flotteur et les grilles flexibles et commencer à utiliser les grilles de xy, il est déjà avec des classes d'aide pour faire ce que vous essayez de faire.

{% block body %} 
<div class="grid-container"> 
    <div class="grid-x align-center"> 
      <div class="shrink cell"> 

       <h1>CONTENT FROM OTHER PAGES</h1> 
       <p>Here is some content.</p> 

      </div> 
    </div> 
</div> 

{% endblock %} 

Assurez-vous que vous avez une cellule unique à l'aide rétrécir dans le conteneur (rétrécir les forces de la cellule à utiliser comme moins d'espace possible), de sorte que tout le contenu est centré et div.grid-x.align-Centre faire le reste (il centrera toutes les cellules dans le conteneur en créant une seule cellule centrée).

Il y a tellement plus à faire, assurez-vous juste d'utiliser la dernière compilation de base (super important d'utiliser au moins la fondation 6.4.1)