如何中心塊體基礎6？

Question

我創建了一個base.html頁面來擴展到我的其他頁面，但無論我嘗試什麼，我都無法將內容居中放在{％block body％} 有沒有人可以看到問題出在哪裏？ 我正在使用基金會6，並沒有編輯app.css中的任何內容。 讓我知道你是否需要更多信息。

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

如果您使用基金會6那我勸你傾倒浮動和彈性網格，並開始使用xy格架，談到已經與輔助類，使你想做些什麼。

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

請確保您有使用容器內收縮（收縮力盡可能少的空間來使用該單元）的單個細胞，因此所有內容居中和div.grid-x.align中心會做其餘的事情（它將集中在容器內的所有單元有效地創建一箇中心單元格）。

還有很多事情要做，只要確保使用最新的基金會編譯（至少使用基礎6.4.1的超級重要）