[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 476
    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 476
    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] 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
Aligner des checkboxradio jQuery Développement d'un site Web ou d'une appli mobile 7 Mars 2020
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice