如何垂直對齊div中的背景顏色在div中，以便背景填滿？

更新的問題：如何垂直對齊div中的背景顏色在div中，以便背景填滿？

我有一堆DIV，它們是菜單系統的一部分，並使用display：inline-box顯示。每個div都包含文本。我想在不同的DIV上使用不同的背景色，並且背景填充了div的整個高度，我還希望文本沿着所有div垂直對齊。下面的小提琴顯示背景顏色僅用於文字。

舊文本：我在這花了數小時。我發現垂直對齊很容易（例如在這裏：How to vertically align div inside another div without display:table-cell），但無法弄清楚如何我可以用背景色填充整個div。

我的示例代碼是小提琴：http://jsfiddle.net/joche/s7beksLt/

<div class="DivParent"> 
    <div class="DivWhichNeedToBeVerticallyAligned bg1"> 
    one line 
</div> 
    <div class="DivWhichNeedToBeVerticallyAligned bg2"> 
    <p>one line</p> 
</div> 
    <div class="DivWhichNeedToBeVerticallyAligned bg3"> 
    <p>one line</p> 
    <p>two line</p> 
    </div>  
    <div class="DivHelper"></div> 
</div>

CSS：

.DivParent { 
height: 100px; 
border: 1px solid lime; 
white-space: nowrap; 
background-color:#deadad; 
} 

.DivWhichNeedToBeVerticallyAligned { 
display: inline-block; 
vertical-align: middle; 
white-space: normal; 
} 
.bg1 { 
background-color:#ffaaff; 
} 
.bg2 { 
background-color:#ffffff; 
} 
.bg3 { 
background-color:#ffffa9; 
height:100% 
} 

.DivHelper { 
display: inline-block; 
vertical-align: middle; 
height:100%; 
}

來源

2014-10-07 Joche

Ehat做你想做？哪個部門要填充顏色？ – Tushar 2014-10-07 10:19:48

目前尚不清楚你想要做什麼。你有這樣的圖像應該是什麼樣子？ – 2014-10-07 10:20:04

是否要在所有包裝箱或具有顏色的特定包裝箱中填充相同的顏色。 – Mayank 2014-10-07 10:21:07

我看着你的jsfiddle，並根據您的代碼，並質疑這是一個有點誤導。特別是因爲小提琴的代碼不是你在問題中發佈的代碼。

所以你試圖用不同的背景色填充每個div「單元格」？如果是這樣，那些「單元格」就是.DivParent類。 內部div（您標記爲.bg1，.bg2，.bg3）僅由文本本身組成 - 這些div只擴展到它們包含的文本的邊界（以及任何邊距，填充等）。 .DivParent實際上是整個「細胞」。看到這個圖片，看看我的意思：http://i.imgur.com/67y3iWV.png

所以你所要做的就是將類.bg1，.bg2等應用到父類。這是我與每一個「細胞」不同的背景顏色小提琴：http://jsfiddle.net/Arkatect/8vmp0124/

在HTML注意，獨立保函類是對父母，不只是有文字的div：

<div class="DivParent bg2"> 
     <div class="DivWhichNeedToBeVerticallyAligned"> 
     <p>Two</p> 
     <p>Lines</p> 
     </div><div class="DivHelper"></div> 
    </div>

我希望這是你正在尋找的。

來源

2014-10-07 10:28:52

是的，我設法發佈錯誤的小提琴鏈接。問題用正確的鏈接http://jsfiddle.net/joche/s7beksLt/更新，我相信這會對我的問題傳播一些信息。也許你的答案可以應用於我的問題，我只是無法讓它工作。 – Joche 2014-10-07 10:52:18

看看這一個你不.table-cell我提出：http://jsfiddle.net/csdtesting/sos5sxkj/

.DivParent { 
 
    height: 100px; 
 
    border: 1px solid lime; 
 
    white-space: nowrap; 
 
    background: gray; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.DivWhichNeedToBeVerticallyAligned { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    background: red; 
 
} 
 
.DivHelper { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
}

<div class="DivParent"> 
 
    <div class="DivWhichNeedToBeVerticallyAligned">one line</div> 
 
    <div class="DivHelper"></div> 
 
</div> 
 
<div class="DivParent"> 
 
    <div class="DivWhichNeedToBeVerticallyAligned"> 
 
    <p>Two</p> 
 
    <p>Lines</p> 
 
    </div> 
 
    <div class="DivHelper"></div> 
 
</div>

來源

2014-10-07 10:31:37

如何垂直對齊div中的背景顏色在div中，以便背景填滿？

回答

相關問題