Wie zentriert Block Körper Fundament 6?

Question

Ich habe eine base.html-Seite erstellt, um sie auf meine anderen Seiten zu erweitern, aber egal, was ich versuche, kann ich den Inhalt nicht innerhalb des {% block body%} zentrieren. Kann jemand sehen, wo das Problem liegt? Ich verwende Foundation 6 und habe nichts in app.css bearbeitet. Lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.

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

Wenn Sie 6 Foundation verwenden sind dann rate ich Ihnen, den Schwimmer und Flex Gitter zu entleeren und beginnen, die xy-Gitter verwendet wird, kommt es bereits mit Hilfsklassen zu machen, was Sie zu tun versuchen.

{% 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 %} 

Stellen Sie sicher, dass eine einzelne Zelle haben innerhalb des Behälters mit Schrumpf (Schrumpfkräfte die Zelle als weniger Raum wie möglich zu verwenden), so dass alle Inhalte zentriert ist und die div.grid-x.align-Center Mach den Rest (es zentriert alle Zellen innerhalb des Containers und erzeugt effektiv eine einzelne zentrierte Zelle).

Es gibt so viel mehr zu tun, stellen Sie einfach sicher, dass Sie die neueste Foundation Compilation verwenden (super wichtig, mindestens Stiftung 6.4.1 zu verwenden)