Positionierung von div vertikal

Ich habe so etwas wie dieses:

Positionierung von div vertikal

Lösung jetzt:
Feste Höhe und negativen top-Wert.

Ich will jetzt die position der rot markierten box senkrecht in die parent-div, aber Sie müssen flexibel sein, denn es gibt Optionen, erweitern Sie den roten Rahmen mit ein oder zwei text-Zeilen.

Größen sind 840x300px und der code richtig ist jetzt:

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;

}

Dies ist nicht sehr flexibel. Wenn ich, fügen Sie eine weitere Zeile in den roten div, erweitert es aber nicht mehr zentriert. Haben Sie eine Idee?
Auch, ich denke, es könnte eine bessere Lösung für die "Bild" - div.

danke.

Wo ist die css-Datei für die Daten rot?
Red ist einfach nur ein Roter hintergrund png. Nichts wichtiges. Sry

InformationsquelleAutor Marek123 | 2013-07-16

  1. 2

    Schlage ich vor, mit CSS-Tabellen (e.g display:table-cell) und vertical-align:middle.

    Sehen Sie sich diese demo

    BEARBEITEN

    Platzieren Sie das Bild in absolute position und den text-container in relative position. Dasselbe Prinzip für die vertikale Ausrichtung mit CSS-Tabellen.

    Aktualisierte demo

    Gute Idee, aber ich kann nicht setzen Sie das Bild in den CSS-code. Es wird dynamisch erzeugt werden.
    Kein problem! Siehe meine Antwort zu Bearbeiten.
    Ja! Toll. Danke!!!

    InformationsquelleAutor otinanai

  2. 4

    Ich würde vorschlagen 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;
}

    Diese wird vertikal ausrichten, div zentral. Sie können die Polsterung oben zu bringen, es ein wenig runter usw.

    Auf der Suche gut, aber was passiert, wenn ich 1-2-3-Reihen von text? Es scheint, dass die "Daten"-box nicht verlängern, nicht wahr?
    Ich habe eine Höhe von 150px, das ist, warum. Man könnte dies ändern, um eine andere Nummer oder auto etc
    Wenn ich es geändert auto, es geht über die gesamte Höhe des übergeordneten div. Ich brauche nur an die Letzte Zeile der Daten-div. Haben Sie eine Idee?

    InformationsquelleAutor Kevin Lynch

Schreibe einen Kommentar