Centrer une image horizontalement ET verticalement [Résolu/Fermé]

Signaler
-
 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.

3 réponses

Messages postés
504
Date d'inscription
vendredi 7 novembre 2014
Statut
Membre
Dernière intervention
5 janvier 2017
61
Bonjour
Pourrait avoir ton code (sa serait mieux pour t'aider....)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Utilisateur anonyme
Ben justement il n'y a pas de code puisque j'essaye d'en trouver un qui me permettrait de centrer verticalement et horizontalement.
Et tous mes essais ont échoué.
Utilisateur anonyme
EDIT : problème résolu à présent.
Messages postés
1787
Date d'inscription
mardi 8 novembre 2011
Statut
Membre
Dernière intervention
14 mars 2020
601
Avec la fonction Display : table cell;
Ça fonctionne aussi pour Vertical align

--
Utilisateur anonyme
Comment est-de que je m'en sers ?
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
439
Salut,

Un exemple rapide d'une solution possible avec le positionnement absolu :
http://jsfiddle.net/or68ohdL/

Bonne journée
Utilisateur anonyme
Ca fonctionne, merci beaucoup !!!
Utilisateur anonyme
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.
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
439
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.
Utilisateur anonyme
D'accord, merci.

Pourquoi n'y a-t-il pas un code qui permettrait plus facilement de centrer automatiquement ?

Et comment dois-je faire pour un texte ?