web-dev-qa-db-fra.com

Comment centrer des images sur une page Web pour toutes les tailles d'écran

J'ai un problème avec mon code HTML. J'ai cherché partout sur Internet, mais toujours pas de vraie réponse.

J'ai un site Web avec des images et je veux qu'elles soient au milieu. Maintenant, sur mon écran, ils sont au milieu, mais c'est parce que je les ai mis là en les déplaçant d'un côté. Lorsque mes amis le regardent, l'image est décentrée.

Voici le site web ; Si vous êtes sur un écran de 13,5 ", il semblera être au milieu.

htmlcsscenteringtext-align
29
connor.p

Ne serait-il pas acceptable d’utiliser un simple <center></center> tag?

Je dois manquer quelque chose ici sinon. N'hésitez pas à expliquer pourquoi dans un commentaire. J'adore le webdesign et votre site est très impressionnant. Je pourrais suggérer de faire quelque chose pour réduire le temps de chargement, c'est un peu éteindre.

-D'un fan de MC à un autre :)

EDIT

Je viens de regarder votre code ... ouch!

<center></center> 

<center><body onload="MM_preloadImages('../logo-glow.png')"> 
<a href="homepage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('minecraft2','','../logo-glow.png',1)"><img src="../log-noglow.png" name="minecraft2" width="998" height="222" hspace="0" border="0" align="absmiddle" id="minecraft2" /></a></body></center>

Essayez de ne pas mettre les balises de formatage en dehors du corps. Placer le <center> à l'intérieur de la balise body. Cela fonctionne car il suit les règles strictes du HTML de bas niveau, cependant, tous les navigateurs ne sont pas ce Nice et certains peuvent afficher votre page de façon incorrecte à moins que ce problème ne soit résolu!

31
Freesnöw

Essayez quelque chose comme ça ...

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>
76
Thomas Shields

Dans votre cas spécifique, vous pouvez définir l'élément contenant a comme suit:

a {
    display: block;
    text-align: center;
}

démo JS Bin .

9
David Thomas
<div style='width:200px;margin:0 auto;> sometext or image tag</div>

cela fonctionne horizontalement

7
user1468562