Sujet Précédent Sujet Suivant

Centrer une image horizontalement ET verticalement

Résolu/Fermé
Utilisateur anonyme - 20 nov. 2014 à 17:53
 Utilisateur anonyme - 9 déc. 2014 à 09:44
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.
A voir également:

3 réponses

Réponse 1 / 3
DerkoFR Messages postés 504 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 74
4 déc. 2014 à 14:37
Bonjour
Pourrait avoir ton code (sa serait mieux pour t'aider....)
1
Utilisateur anonyme
5 déc. 2014 à 10:02
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é.
0
Utilisateur anonyme
5 déc. 2014 à 10:04
EDIT : problème résolu à présent.
0
Réponse 2 / 3
jolyjump3r Messages postés 1827 Date d'inscription mardi 8 novembre 2011 Statut Membre Dernière intervention 14 mars 2020 616
9 déc. 2014 à 02:00
Avec la fonction Display : table cell;
Ça fonctionne aussi pour Vertical align

--
0
Utilisateur anonyme
9 déc. 2014 à 09:44
Comment est-de que je m'en sers ?
0
Réponse 3 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
4 déc. 2014 à 15:01
Salut,

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

Bonne journée
-1
Utilisateur anonyme
5 déc. 2014 à 10:03
Ca fonctionne, merci beaucoup !!!
0
Utilisateur anonyme
5 déc. 2014 à 11:45
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.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
5 déc. 2014 à 14:01
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.
0
Utilisateur anonyme
5 déc. 2014 à 16:19
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 ?
0