中心DIV DIV使用顯示器內部：表

Question

我有以下幾點：

#innerLabels, 
 
#innerFields { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    vertical-align: top; 
 
} 
 
.innerLabel { 
 
    display: table; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height: 100px; 
 
    width: 80%; 
 
} 
 
.innerLabel div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 
#outterFields { 
 
    background-color: red; 
 
    width: 60%; 
 
    min-width: 300px; 
 
    height: 300px; 
 
} 
 
#outterFields div { 
 
    display: inline-block; 
 
}

<div id="outterFields"> 
 
    <div id="innerLabels"> 
 
    <div class="innerLabel"> 
 
     <div>hello</div> 
 
    </div> 
 
    </div> 
 
</div>

爲什麼最內層的div不被居中我不能工作了？我在這裏看到了一些關於定心的答案，但是我看不出有什麼問題...

我想讓你的中心垂直居中而不是水平居中。 所有其他divs的定位是我想要的。由於某種原因，他們並排定位的其他div中沒有​​錯誤。我想唯一的變化是你好DIV垂直移動到中心

Answer 1

你只是overiding你內心的div與

#outterFields div { 
    display: inline-block; 
} 

只是將其刪除，或者如果你在哪裏打算直接子做：

#outterFields > div { 
    display: inline-block; 
} 

#innerLabels, 
 
#innerFields { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    vertical-align: top; 
 
} 
 
.innerLabel { 
 
    display: table; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height: 100px; 
 
    width: 80%; 
 
} 
 
.innerLabel div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 
#outterFields { 
 
    background-color: red; 
 
    width: 60%; 
 
    min-width: 300px; 
 
    height: 300px; 
 
} 
 
#outterFields div { 
 
/* display: inline-block; */ 
 
}

<div id="outterFields"> 
 
    <div id="innerLabels"> 
 
    <div class="innerLabel"> 
 
     <div>hello</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

必要的和最經常的充分條件，您可以在中心使用display: table-cell一個div，如下：

<div id="a"> 
    <div id="b"> 
     <div id="c">Helo</div> 
    </div> 
</div> 

CSS如下：

body, html { 
    height: 100%; 
} 

#a { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

#b { 
    display: table-cell; 
    vertical-align: middle; 
} 

#c { 
    margin: auto; 
    text-align: center; 
} 

1. 你需要html和body元素實際上橫跨文檔的整個高度如果你想讓你的a div能夠使用它的高度100%高度。如果您的用例要求高度不取決於文檔正文的高度，則不必使用body, html選擇器。
2. 當您使用display: table時，div元素（width: auto隱式規則）的其他自動擴展寬度與display: table使用保守寬度計算的元素不再適用相同的方式 - 它們只在默認情況下佔用足夠的空間內容要求。由於我正在向您展示以「100％100％」爲中心，因此我有width: 100%將元素展開爲可用的父級寬度。
3. height: 100%同樣需要將元素展開爲可用的父級高度。如果display: block與常規div元素或display: table一樣，則無關緊要 - 如果要計算的高度超出內容高度，則需要指定高度。
4. display: table-cell規則只適用於存在display: table的祖先元素，因此您至少需要兩個元素才能將display: table-cell應用到另一個元素中。您無需指定height，因爲具有display: table-cell的元素會自動佔用可用的父級高度。爲display: table-cell元件
5. vertical-align規則是唯一的情況下對準適用於內容在元件內部，而不是其通常的行爲，其中它適用相對於元素如何定位母體內。這意味着在我們的例子中，vertical-align告訴瀏覽器，包含在display: table-cell元素中的所有元素都要在其計算高度內垂直居中。
6. 對於c元素，僅當您的內容未完全填充可用的父寬度時，才需要margin: auto。由於div元素通常會這樣做，因此不是必需的，但是對我而言則是前瞻性思維 - 如果您決定使用span或其他保守計算寬度的其他元素。 text-align爲自己說話 - 後代元素中的匿名文本內容和文本將沿橫軸居中。

Answer 3

您的外場顯示行內塊正在覆蓋其他顯示項目。我爲你提出了更好的解決方案。我沒有使用表格，但在這裏使用flex瞭解Flex更值得。

#outterFields { 
 
    background-color:red; 
 
    width:60%; 
 
    min-width:300px; 
 
    height:300px; 
 
} 
 
#innerLabels, #innerFields { 
 
    display:flex; 
 
    align-items:center; 
 
    width:200px; 
 
    height:200px; 
 
    border: 1px solid #000; 
 
} 
 
.innerLabel { 
 
    display:flex; 
 
    align-items:center; 
 
    border: 1px solid #000; 
 
    height:100px; 
 
    width:80%; 
 
} 
 
.innerLabel div { 
 
    display:table-cell; 
 
    vertical-align: middle; 
 
    border: 1px solid #000; 
 
}

<div id="outterFields"> 
 
    <div id="innerLabels"> 
 
     <div class="innerLabel"><div>hello</div></div> 
 
    </div> 
 
</div>