Positionnement des div verticalement

J'ai eu quelque chose comme ceci:

Positionnement des div verticalement

Solution maintenant:

hauteur fixe et négatif de haut en valeur.

Maintenant, je veux la position de la zone rouge verticale dans le div parent, mais elle doit être souple, car il y a des options qui pourraient étendre la zone rouge avec un ou deux plus de texte des lignes.

Tailles sont 840x300px et le code de droit est maintenant:

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;

}

Ce n'est pas très flexibel. Quand j'ai ajouter une ligne dans la div rouge, il se dilate, mais n'est pas plus centrée. Avez-vous une idée?

Aussi, je pense qu'il y a peut-être une meilleure solution pour "l'image" de la div.

merci.

  • Où est le css pour les données en rouge?
  • Rouge ist juste un arrière-plan rouge de la png. Rien d'important. Sry
InformationsquelleAutor Marek123 | 2013-07-16
  1. 2

    Je suggère l'utilisation de CSS tables (e.g display:table-cell) et vertical-align:middle.

    Voir cette démo

    MODIFIER

    Place de l'image dans absolute position et le conteneur de texte dans relative position. Même principe pour l'alignement vertical avec des règles CSS.

    Mise à jour de la démo

    • Bonne Idée, mais je ne peux pas mettre l'image dans le code CSS. Il sera généré dynamiquement.
    • Pas de problème! Voir ma réponse à modifier.
    • Oui! Grand. Merci!!!!
    InformationsquelleAutor otinanai
  2. 4

    Je dirais position: absolute

    DÉMO 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;
}

    Ce seront alignées à la verticale de la div de façon centralisée. Vous pouvez rembourrage haut de la ramener un peu etc.

    • À la recherche de bonnes, mais ce qui se passe lorsque je ajouter 1-2-3 lignes de texte? Il semble que les "données"-box ne s'étend pas, n'est ce pas?
    • J'ai ajouté une hauteur de 150 px c'est pourquoi. Vous pouvez changer ce vers un autre numéro ou auto, etc
    • Quand je l'ai changé pour l'auto, il va de toute la hauteur de la div parent. J'ai juste besoin de la dernière ligne de l'-div. Avez-vous une idée?
    InformationsquelleAutor Kevin Lynch