定位格垂直

我得到了這樣的事情：定位格垂直

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

回答

相關問題