在有組織的列系統中居中div

我正在創建一個網頁，並且希望使用類似於具有定義的列和行的基礎/ bootstrap的系統。我對迄今爲止的工作感到滿意，但我不確定如何在一行中居中放置一列，同時仍然使用已定義的網格系統。我知道一般的HTML格式是這樣的：在有組織的列系統中居中div

<div class="column column-6 center">

http://codepen.io/Kiwimoose/pen/dpvEqO

是我到目前爲止，我只是不知道「中心」標籤通常是如何格式化的基礎。我希望將第二行中的列以及未來的其他列中。

來源

2016-09-25 moose

嘗試

<div align="center">

然後你就可以在CSS定義它，你正在做

來源

2016-09-25 20:47:07

在Zurb基礎，您可以使用「-offset-」和「結束」的類名，例如

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

docs here

來源

2016-09-25 20:50:38

啊，我通常在基礎這一然而工作，我不是。我想了解基礎如何工作的系統。我知道有很多關於它如何工作的zurb基礎資源，但它似乎沒有涵蓋它的css方面。這就是我需要改進的地方。 – moose

您的代碼行，你只需要改變CSS順序：

.column { 
    position: relative; 
    float: left; 
    display: block; 
} 

.center { 
    margin:auto; 
    float:none; 
}

樣式.center下課。列類，它會工作。順便說一句，清理一下你的代碼是一個不錯的主意。

來源

2016-09-25 20:51:29

非常感謝！我不知道順序實際上在CSS中至關重要。這使事情變得如此簡單。唉，我認爲我的代碼是這樣的，很乾淨。我需要更多評論嗎？或者它只是它被標記出來的方式？或一般的命令？非常感謝:) – moose

沒問題:)。是的，順序在CSS中很重要，如果您在兩個不同的位置創建相同的元素/類，則第二個規則將覆蓋第一個（僅加倍的屬性）。因此，在CSS文件的頂部添加常規樣式（例如.column類）是一個不錯的主意，因此您可以覆蓋它們（例如.center類）。這個CSS功能非常非常有用:)。當談到代碼質量的其他方面時，請保持間距一致，規則和每個屬性之間的一行分隔線（規則內部有一些空行）。你有足夠的評論。 –

與Twitter的引導中心正常（無頭痛），你可以簡單地設置空的div如下：

<div class="row"> 
    <div class="col-xs-3"></div> 
    <div class="col-xs-6"> 
     centered div in all resolutions 
    </div> 
    <div class="col-xs-3"></div> 
</div>

或者您可以使用太抵消

來源

2016-09-25 21:26:07 JoelBonetR

在有組織的列系統中居中div

回答

相關問題