J'aimerais centrer une image dans une page à la fois verticalement et horizontalement, même lorsque le navigateur est redimensionné.
Actuellement, j'utilise ce CSS: P>
<img class="centeredImage" src="images/logo.png">
13 Réponses :
text-align:center; vertical-align:middle; vertical-alignShould to the trick
Notez que Text-Align doit être appliqué sur le conteneur, pas l'image. Aussi vertical-align ne fonctionne pas pour moi, test avec IE7.
Essayez d'utiliser ceci:
position: absolute
Cela a fait l'astuce ... maintenant pour essayer de le faire fonctionner pour une image de manière dynamique de la largeur et de la hauteur de l'image.
JQuery vous aidera avec ça.
@Tesserex depuis quand est-ce que JQuery considéré comme CSS?
Si les réponses fournies ne fonctionnent pas et / ou non cohérentes dans chaque navigateur, vous voudrez peut-être donner une prise de vue:
http://andreaslagerkvist.com/jQuery/center/ devrait l'obtenir, cependant.
Ce plug-in Jquery a l'air fantastique, bien que j'utilise ExtJS, je dois donc voir si je peux le traduire.
Ahh, peut-être qu'un plugin équivalent existe. Pas familier avec extjs.
IE a des problèmes avec Utiliser Les marges automatiques ne fonctionnent pas dans IE, au moins quand je le teste. Position: fixe (avec un million d'autres choses), donc je conseillerais à ce que la compatibilité soit importante.
Position: absolu si le conteneur n'a pas à faire défiler. Sinon, vous aurez besoin de JS pour régler le haut et la gauche de votre image comme vous faites défiler.
text-align: centre devrait fonctionner si appliqué au conteneur de l'image, mais pas à l'image elle-même. Mais bien sûr, ne traite que de l'horizontale, pas verticale. Vertical-Aligner: Milieu ne fonctionne pas pour moi, même avec un conteneur assez important.
CLEAR: les deux; Marge: Auto;
solution: puisque vous avez mentionné: et si son alignement correctement au centre, votre hauteur d'image serait 50x2 = 100px; & largeur 150x2 = 300px;
Ceci est une manière délicate, mais cela fonctionne:
CSS: P>
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="my_cool_image.png" alt="hello world" /></td>
</tr>
</table>
</body>
</html>
Je l'ai résolu de cette façon:
img.class-name{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Fonctionne dans des versions actuelles d'opéra, de chrome, de firefox et de safari. C'est-à-dire n'importe qui?
.image {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Je l'ai fait! Cette méthode est solide et fonctionne sur tous les grands navigateurs.
style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"
Avez-vous essayé ceci à différentes largeurs de fenêtre - c'est-à-dire réactif?
Il y a un navigateur transversal très simple, méthode de redimensionnement automatique. Prendre une image avec largeur de 200px. Prenez la moitié de la largeur, procédez comme suit:
#imgcent1 {
left: calc (100% - 100px / 2 );
/*rest of code*/
}
Une seule image sur le Web et réactif
/image.png CSS: html:
Le baiser universel ("Gardez-le simple et stupide"):
Avez-vous "savoir" la hauteur de l'image?
Oui, bien que évidemment la question de crédit supplémentaire soit de savoir comment le faire génériquement pour une image.