alignement vertical des éléments dans une div

Question

J'ai un div avec deux images et un h1. Tous doivent être alignés verticalement dans le div, l'un à côté de l'autre. Une des images doit être positionnée en absolu dans la div.

Quel est le css nécessaire pour que cela fonctionne sur tous les navigateurs courants?

   <div id=header">
      <img src=".." ></img>
      <h1>testing...</h1>
      <img src="..."></img>
    </div>
 

Answer 1

Wow, ce problème est populaire. Il est basé sur une incompréhension dans l' vertical-align de la propriété. Cet excellent article, il explique:

La compréhension vertical-align, ou "Comment (ne Pas) à la Verticale du Centre de Contenu" par Gavin Kistner.

---

En un mot _{^{(et à prévenir la pourriture des liens)}}:

• Les éléments en ligne (et uniquement des éléments inline) peuvent être alignés verticalement dans leur contexte grâce à vertical-align: middle. Cependant, le "contexte" n'est pas l'ensemble du conteneur parent de la hauteur, c'est la hauteur de la ligne de texte. jsfiddle exemple
• Pour les éléments de bloc, l'alignement vertical est plus difficile et dépend fortement de la situation spécifique:
  • Si l'intérieur de l'élément peut avoir une hauteur fixe, vous pouvez faire de sa position absolute et de préciser sa height, margin-top et top position. jsfiddle exemple
  • Si l'centrée élément se compose d'une seule ligne et son parent hauteur est fixe , vous pouvez simplement placer le récipient de l' line-height pour remplir sa hauteur. Cette méthode est très polyvalent dans mon expérience. jsfiddle exemple
  • ... il y a plus de tels cas.

Answer 2

J’ai utilisé ce code très simple :

HTML :

CSS :

.. .et ça marche pour moi. évidemment, à l’aide de classe ou ID ne changera pas le résultat... C’est tout !

au revoir - Nicola

Answer 3

Ça a marché pour moi.

Answer 4

Une technique d’un de mes amis :

HTML :

CSS :

Démo ici

Answer 5

Tous doivent être alignés verticalement à l'intérieur de la div

Aligné comment? Tops des images aligné avec le haut du texte?

L'une des images doit être absolue positionné à l'intérieur de la div.

En position absolue par rapport à la DIV? Pourriez-vous esquisser ce que vous cherchez...?

fd a décrit les étapes à suivre pour le positionnement absolu, ainsi que réglage de l'affichage de l' H1 élément, telles que les images apparaissent en ligne avec elle. Pour cela, je vais ajouter que vous pouvez aligner les images par l'utilisation de l' vertical-align style:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...ce serait mettre l'en-tête et les images ensemble, avec les bords supérieurs alignés. D'autres options d'alignement existent; voir la documentation. Vous pouvez également trouver utile de déposer la DIV et déplacer les images à l'intérieur de l' H1 de l'élément de cette offre de valeur sémantique du conteneur, et élimine la nécessité de régler l'affichage de l' H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>