1. ✅ Apprenez une METHODE qui marche pour votre SEO ! Formation à distance avec Olivier Duffez et Fabien Facériès + aide pour prise en charge du financement
    Rejeter la notice

Centrer une image horizontalement sur un div

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sigma2008, 25 Septembre 2012.

  1. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    775
    J'aime reçus:
    5
    Bonjour j'ai ce code :
    Code:
    <div style="border: 1px solid #ccc; text-align:center; width:100px; height:100px;">
    <img src="lien" />
    </div>
    [code]
    
    la petite image se centre sur le div horizontalement, et je cherche aussi à centrer mon image verticalement ! comment faire ça svp :)
    
    Merci ;)
     
  2. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    on ne peut pas, sauf à émuler le formattage des tables dans les div
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 057
    J'aime reçus:
    294
    Comme le div a une hauteur et une largeur prédéfinie, et si c'est le cas aussi pour l'image, tu peux jouer avec du padding sur le div ou du margin sur l'image.
     
  4. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    je n'avais pas fait attention au fait que largeur et hauteur du div étaient fixes.
    Mais bon, pour gérer avec les margin/padding, il faut que les dimensions de l'image soient fixes et, en plus, tous les navigateurs ne gèrent pas de la même façon les box
     
  5. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    Sinon sur la div display:table-cell et sur l'image vertical-align:middle
     
  6. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    c'était l'émulation de <table> dont je parlais
     
  7. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    775
    J'aime reçus:
    5
    Merci pour vos réponses ;)
    J'ai essayé ça
    Code:
    <div style="border: 1px solid #ccc; text-align:center; width:100px; height:100px;display: table-cell;">
    <img src="lien" style="max-height: 117px; max-width:117px; vertical-align:middle"/>
    </div>
    
    Et ça ne marche toujours pas car sachant que l'image à la taille 117*50px
     
  8. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    le vertical-align devrait être dans le div
     
  9. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 113
    J'aime reçus:
    12
    Bonjour

    <div style="text-align:center; width:x%; margin-left:auto; margin-right: auto;">

    <img style="width: 100%" src="...etc..." />

    </div>


    Mes deux cents.

    Comme la largeur de l'image, est déterminée par celle du div l'englobant ( 100% du div ), il suffit de régler le width en pourcentages du div, pour fixer la largeur relative de l'image par rapport au container du div, et le div sera centré par rapport à son container.

    C'est la méthode que j'ai utilisé pour mon site.

    Bien amicalement.

    Jean François Ortolo
     
  10. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    oui, mais, en fait, sa question est pour centrer verticalement, le titre du message est erroné
     
  11. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 113
    J'aime reçus:
    12

    Bonsoir Leonick

    Je crois que je me fais vieux... ;(

    Décidément, je suis à la fois bigleux, et je manque d'attention. ;)

    Que penses-tu de mon nouvau logo de mon site ?

    Bien amicalement.

    Jean François Ortolo
     
  12. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    701
    J'aime reçus:
    0
    Je viens de penser à une autre solution.
    Les images ont l'avantage de pouvoir s'aligner verticalement sur la ligne de base du texte. L'idée, c'est de préciser une hauteur de ligne égale à la hauteur de ton DIV. Ensuite, on aligne au milieu l'image :
    Code:
    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <div style="border: 1px solid #ccc; text-align:center; width:200px; height:200px; line-height: 200px;">
                <img src="http://nsa30.casimages.com/img/2012/07/15/mini_120715023536646953.png" alt=""
                    style="vertical-align: middle; border: 1px solid #000;" />
            </div>
        </body>
    </html>
    
    (j'ai modifié, pour l'exemple, la taille du DIV, à adapter à tes besoins).
    Je n'ai aucune idée sur la compatibilité des navigateurs. En tout cas, sous Firefox 15, ça fonctionnement très bien.
     
  13. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Bonjour.

    Si tu connais la taille de ton image, tu peux essayer ça qui passe partout, même IE6 c'est dire :)

    @++

    Code:
    <html>
    	<head>
    		<style>
    			.box {
    				border: 1px solid #ccc;
    				width:500px;
    				height:500px
    				/*Pas de text-align: center*/
    			}
    			.centrage {
    				position: relative;
    				top:50%;
    				left:50%;
    				margin-top:-55px;	/*hauteur de l'image divisée par 2*/
    				margin-left:-208px	/*largeur de l'image divisée par 2*/
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<img src="https://www.webrankinfo.com/images/wri/webrankinfo-logo.png" width="415" height="110" class="centrage" />
    		</div>
    	</body>
    </html>
    
     
  14. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 249
    J'aime reçus:
    0
Chargement...
Similar Threads - Centrer image horizontalement Forum Date
Centrer image thème naturespace Développement d'un site Web ou d'une appli mobile 19 Mars 2015
Centrer une image en height Développement d'un site Web ou d'une appli mobile 27 Février 2015
Balise Canonical pour "concentrer le jus" SEO? Problèmes de référencement spécifiques à vos sites 18 Juin 2015
Centrer mon site Demandes d'avis et de conseils sur vos sites 26 Novembre 2014
peut on oublier google et se concentrer sur bing et yahoo? Débuter en référencement 7 Février 2013
Centrer verticalement un texte (CSS) Développement d'un site Web ou d'une appli mobile 16 Février 2012
centrer menu horizontal deroulant Développement d'un site Web ou d'une appli mobile 28 Juin 2011
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[RESOLU] jQuery : centrer par rapport à la taille du navigateur Développement d'un site Web ou d'une appli mobile 25 Août 2010
Search Console Problèmes chargements images Crawl et indexation Google, sitemaps 3 Septembre 2020