定位格垂直

我得到了这样的事情：定位格垂直

enter image description here

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

现在我想在父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; 

}

这是不是很flexibel。当我再向红格添加一行时，它会扩展但不再居中。你有好主意吗？
另外，我觉得有可能是为“形象”的div一个更好的解决方案。

谢谢。

来源

2013-07-16 Marek123

哪里的数据红色的CSS？ – designtocode

红色ist只是一个红色背景PNG。没有要紧的。 Sry基因 – Marek123

我建议使用CSS表（例如display:table-cell）和vertical-align:middle。

See this demo

EDIT

放置在absolute位置的图像并在relative位置的文本容器。与CSS表格垂直对齐的原理相同。

Updated demo

来源

2013-07-16 13:18:57 otinanai

好主意，但我无法将图像放入CSS代码中。它会动态生成。 – Marek123

@ Marek123没问题！查看我的答案编辑。 – otinanai

是的！大。谢谢！ – Marek123

我建议position: absolute

DEMO 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集中。您可以填充顶部使其稍微降低等。

来源

2013-07-16 12:59:50 Vector

看起来不错，但是当我添加1-2-3行文本会发生什么？看起来“数据”框不会扩展，是吗？ – Marek123

我已经添加了150px的高度，这就是为什么。当我把它改成自动您可以将其更改为另一个号码或汽车等 – Vector

，这是不言而喻的父div的最大高度。我只需要它到data-div的最后一行。你有好主意吗？ – Marek123

回答

相关问题