[CSS] Aligner une image à coté d'une div en display:table-cell ?

[lambi521]

Bonjour à tous,

J'ai une div qui contient des images. Cette div est en display:table-cell et vertical-align:middle.
De cette manière, les images qui sont dans cette div sont bien alignées verticalement.
Pas de soucis de ce coté.

A coté de cette div, j'aimerais mettre une image qui fait la même hauteur.

Le problème c'est que, tel quel, l'image se met en dessous de la <div>

J'ai bien réussi à mettre mon image à coté grâce à display:inline ou flaot:left ou position:absolute mais tout ça "casse" mon vertical-align:middle

Comment dois-je faire ? Car en gros je ne peux pas supprimer mon display:table-cell sans perdre l'alignement vertical

Mon code est comme ça :

<div style="height:90px;display:table-cell;vertical-align:middle">
<img centrée verticalement>
<img centrée verticalement>
<img centrée verticalement>
<img centrée verticalement>
</div>
<img de la même hauteur que la div mais qui se trouve en dessous plutot qu'à coté>

 

[Supermaury]

Bonjour.

Essaie un peu d'impriquer ton premier div dans un autre, visiblement ça marche et ton alignement vertical fonctionne toujours.

<div style="float:left">
	<div style="height:90px;display:table-cell;vertical-align:middle">
		<img centrée verticalement>
		<img centrée verticalement>
		<img centrée verticalement>
		<img centrée verticalement>
	</div>
</div>
<img de la même hauteur que la div mais qui se trouve en dessous plutot qu'à coté>

@++

 

[lambi521]

Merci pour la réponse,

C'est exactement ce que j'ai mis en place hier. Je souhaitais n'avoir qu'une seule div car cette modif était dans le but de réduire le code source (cette partie de code se répète 15 fois par page sur plusieurs pages) mais c'est déjà bien mieux qu'avant où c'était des <table> imbriquées.