Centrer une image horizontalement ET verticalement
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonsoir tout le monde,
Depuis deux jours, j'essaie de créer une page d'erreur 404 personnalisée en me servant de cette image.
Pour cela, je souhaite centrer l'image au milieu absolu de la page, horizontalement et verticalement.
Cependant, après avoir essayé plein de codes HTML et CSS de différents tutoriels trouvés sur Google et dans ma tête, il m'est impossible de faire cohabiter les deux codes qui définissent le centrale horizontal (text-align: center) et vertical (vertical-align: middle;).
Quelqu'un aurait-il une idée ?
Merci d'avance.
Depuis deux jours, j'essaie de créer une page d'erreur 404 personnalisée en me servant de cette image.
Pour cela, je souhaite centrer l'image au milieu absolu de la page, horizontalement et verticalement.
Cependant, après avoir essayé plein de codes HTML et CSS de différents tutoriels trouvés sur Google et dans ma tête, il m'est impossible de faire cohabiter les deux codes qui définissent le centrale horizontal (text-align: center) et vertical (vertical-align: middle;).
Quelqu'un aurait-il une idée ?
Merci d'avance.
A voir également:
- Word centrer une image
- Word 2013 - Télécharger - Traitement de texte
- Supprimer une page word - Guide
- Tableau word - Guide
- Espace insécable word - Guide
- Word et excel gratuit - Guide
3 réponses
Salut,
Un exemple rapide d'une solution possible avec le positionnement absolu :
http://jsfiddle.net/or68ohdL/
Bonne journée
Un exemple rapide d'une solution possible avec le positionnement absolu :
http://jsfiddle.net/or68ohdL/
Bonne journée
En revanche, dès que je mets une autre image, ça ne fonctionne plus.
Si, maintenant, je souhaite utiliser cette image pour une page 401, quelle est la technique ?
Merci de votre aide.
Si, maintenant, je souhaite utiliser cette image pour une page 401, quelle est la technique ?
Merci de votre aide.
La technique est la suivante :
On positionne l'image au centre de la page grâce aux propriétés top: 50%; et left: 50%;
En faisant ainsi c'est le coin en haut à gauche de l'image qui est centré par rapport à la page. Si on veux centrer par rapport au centre de l'image, on applique alors une marge négative en hauteur et en largeur correspondant à la moitié de l'image, donc margin-top: hauteur_image/2; et margin-left: largeur_image/2;
Tu dois donc modifier uniquement les marges en fonction de la taille de l'image.
On positionne l'image au centre de la page grâce aux propriétés top: 50%; et left: 50%;
En faisant ainsi c'est le coin en haut à gauche de l'image qui est centré par rapport à la page. Si on veux centrer par rapport au centre de l'image, on applique alors une marge négative en hauteur et en largeur correspondant à la moitié de l'image, donc margin-top: hauteur_image/2; et margin-left: largeur_image/2;
Tu dois donc modifier uniquement les marges en fonction de la taille de l'image.
Et tous mes essais ont échoué.