1

私はこのようなものを得ました：

ここに画像の説明を入力

現在の解決策:
高さを固定し、上部の値を負にします。

ここで、赤いボックスを親 div に垂直に配置したいと考えていますが、1 つまたは 2 つのテキスト行で赤いボックスを拡張するオプションがあるため、柔軟にする必要があります。

サイズは 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 にもう 1 行追加すると、展開されますが、中央に配置されなくなります。アイデアはありますか？
また、「画像」divにはもっと良い解決策があると思います。

ありがとうございました。

4

2 に答える 2

4

私は提案します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 が中央に垂直に配置されます。上部をパディングして少し下げることができます。

于 2013-07-16T12:59:50.740 に答える
1

CSS テーブル (例: display:table-cell) とを使用することをお勧めしvertical-align:middleます。

このデモを見る

編集

画像をabsolute所定の位置に配置し、テキスト コンテナーを所定のrelative位置に配置します。CSS テーブルでの垂直方向の配置と同じ原則。

更新されたデモ

于 2013-07-16T13:18:57.940 に答える