HTML et CSS - Vertical align divs

J'ai une div sur le côté gauche, et du texte sur le côté droit. Le texte peut avoir 2 ou 3 lignes, et je veux que la main gauche soit centrée verticalement sur ce texte. J'ai regardé en ligne et il semble que toutes les façons de le faire sans utiliser les tables sont compliquées. Y a-t-il un moyen facile de faire ceci?HTML et CSS - Vertical align divs

La plupart des suggestions semblent pointer vers http://www.jakpsatweb.cz/css/css-vertical-center-solution.html qui utilise des "tables CSS". Les tables CSS sont-elles la solution? Est-ce vraiment mieux que d'utiliser des tableaux HTML?

Source

2010-03-07 Kyle

FWIW, le lien que vous faites référence ne fonctionne pas du tout dans Safari sur la Mac. Cependant, d'autres navigateurs basés sur Mac fonctionnent bien. – Robusto

@Robusto - Est-ce que http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-fr.html fonctionne? Je l'ai juste essayé sur Mac Safari et cela a fonctionné, mais c'est un nouveau macbook ... – Kyle

WSpines: Je parle de "l'exemple" qui lie du lien dans votre 2ème paragraphe. – Robusto

Oui, les tables CSS sont meilleures que les tables HTML car elles n'impliquent aucune signification sémantique mais sont explicitement utilisées pour décrire la présentation.

Cependant, pour votre cas, le CSS vertical-align fonctionne. Par exemple: http://jsbin.com/itoyo3/edit.

Source

2010-03-07 03:05:13

Merci, peut-être que je vais aller avec les tables CSS. J'ai essayé l'alignement vertical mais ça n'a pas marché. La div à gauche est flottante à gauche, et la div à droite aussi. – Kyle

Peut-être que vous pouvez mettre les deux div dans un conteneur et flotter le conteneur? Ensuite, la solution simple 'vertical-align' fonctionnerait. –

@Spines, je pense que 'display: table-cell' pour fonctionner cet élément doit être imbriqué dans l'élément' display: table-row' et * cela * dans un élément 'display: table'. Ce qui est logique, vous ne pouvez pas avoir une table-cellule en dehors d'une table: ce serait sans signification. –

Vous pourriez le faire avec un positionnement absolu;

Changer votre code pour ressembler à ceci:

<div id="right-content"><div id="the-left-hand-div">whatever goes here</div><p>The content</p></div>

Définir vos css comme ceci:

#right-content { 
    float: left; 
    position: relative; 
    margin-left: /*the width of the the left div content plus any margin you want*/ 
} 

#the-left-hand-div { 
    position: absolute; 
    left: /*negative width of the the-left-hand-div plus any margin you want*/ 
    top: /*height of #right-content - the-left-hand-div divided by 2 - this could be a negative value if the-left-hand-div is higher than the right-content*/ 
}

Source

2010-03-07 14:27:05 Finbarr

HTML et CSS - Vertical align divs

Répondre

Questions connexes