html - 垂直定位div

Question

我得到了这样的东西：

现在的解决方案：
固定高度和负顶部值。

现在我想将红色框垂直放置在父 div 中，但它必须灵活，因为有些选项可能会用一两个文本行来扩展红色框。

尺寸为 840x300px，现在的代码是：

HTML：

<div class="large-16 columns item">
<div class="box">
  <div class="image"><img src="system/html/band_test1-f5641934.jpg"></div>
  <div class="data red">
    <h1><a href="www.google.de" title="headliner" target="_blank">SEHR LANGER BANDNAME AHOI</a></h1>
    <h2><a href="" title="venue" target="_blank"></a></h2>
    <p class="date">So, 28.07.2013</p>
    <p class="supportbands">+ <a href="" title="Test Support" target="_blank">Test Support</a>  </p>
  </div>
</div>
</div>  

CSS：

.showsblock .item {
    height: 300px;
    margin-bottom: 20px;
}

.box .image img {
    border: 1px solid #a2a2a2;
}
.box .data {
    background: url('../show_bg_black.png') repeat;
    display: inline-block;

    position: relative;
    top: -165px;
    left: 1px;

    padding-right: 10px;
    min-width: 290px;

}

这不是很灵活。当我在红色 div 中再添加一行时，它会扩展但不再居中。你有想法吗？
另外，我认为“图像” div 可能有更好的解决方案。

谢谢你。

Answer 1

我会建议position: absolute

演示http://jsfiddle.net/kevinPHPkevin/kkWUH/2/

div.data {
    position:absolute;
    top:0;
    bottom:0;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    height:150px;
}

这将使 div 居中垂直对齐。您可以填充顶部以将其降低一点等。

Answer 2

I suggest using CSS tables (e.g display:table-cell) and vertical-align:middle.

See this demo

---

EDIT

---

Place the image in absolute position and the text container in relative position. Same principle for vertical alignment with CSS tables.

Updated demo