Question

更新了问题：

我有一堆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%;
}

Answer 1

我看了你的JSfiddle，根据你的代码和问题，它有点误导。特别是因为小提琴上的代码不是你在问题中发布的代码。

所以你试图填补每个div＆＃34; cell＆＃34;具有不同的背景颜色？如果是这样，那些＆＃34;细胞＆＃34;属于.DivParent类。 内部div （你标记为.bg1，.bg2，.bg3）只是由文本本身组成 - 这些div只扩展到它们包含的文本的边界（加上任何边距，填充）等等。 .DivParent 实际上是整个＆＃34;单元＆＃34;。看到这张图片，看看我的意思：http://i.imgur.com/67y3iWV.png

所以你需要做的就是将类.bg1，.bg2等应用于父类。这是我的每个＆＃34;细胞＆＃34;不同的背景颜色：http://jsfiddle.net/Arkatect/8vmp0124/

请注意HTML中单独的bg类位于父项上，而不是仅包含文本的div：

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

我希望这就是你要找的东西。

Answer 2

看看我在没有.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>

如何在div中将div与背景颜色垂直对齐，以便背景填满？

2 个答案: