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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par lambi521, 2 Mai 2012.

  1. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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 :
    Code:
    <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é>
    
     
  2. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Bonjour.

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

    Code:
    <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é>
    
    @++
     
  3. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 463
    J'aime reçus:
    0
    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.
     
Chargement...
Similar Threads - [CSS] Aligner image Forum Date
[CSS] Aligner verticalement un texte dans un bloc div Administration d'un site Web 3 Juin 2004
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
[CSS] decalage image et texte Développement d'un site Web ou d'une appli mobile 18 Juin 2009
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009
[CSS] bouton submit + image arriere plan Développement d'un site Web ou d'une appli mobile 20 Avril 2009
[CSS]Positionner la colonne centrale en haut du source Développement d'un site Web ou d'une appli mobile 29 Mars 2009
[Résolu] [CSS] Lien sur tout un div Développement d'un site Web ou d'une appli mobile 23 Février 2009
[CSS] L'élément body Développement d'un site Web ou d'une appli mobile 21 Décembre 2008
[CSS] : menus déroulants Développement d'un site Web ou d'une appli mobile 15 Décembre 2008
[CSS] : problème de mise en page FF3 Développement d'un site Web ou d'une appli mobile 31 Août 2008
[CSS] (encore!) pas compatible FF Développement d'un site Web ou d'une appli mobile 30 Juin 2008