Aligner verticalement un <div>

**Michaël** · 04/12/2005, 15h23

Bonjour,
je voudrais centrer un div verticalement. il me semble qu'il était possible de faire ceci avec css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style='margin-top:auto; margin-bottom:auto;'></div>

mais ça marche pas

voici le code de ma page complète

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>Le fichier demandé n'existe plus !</title>
<link href="../data/style.css" type="text/css" rel="StyleSheet">
</head>
 
<body>
<div style='text-align:center; font-size:14px; margin-top:auto; margin-bottom:auto;'>
Le serveur a retourné une <font color='red'>erreur 404</font>,<br>
ce qui signifie que le fichier que vous avez demandé n'existe plus.</div>
</body>
</html>

ça ne vient pas de style.css : j'ai testé sans lui et ça ne marche toujours pas.

je voudrais éviter les tableaux pour une bête page 404

une idée ?

**Michaël** · 06/12/2005, 12h53

personne n'a d'idée ?

**Royd938** · 06/12/2005, 13h26

Tu peux ajouter au div que tu veux aligner verticalement les propriétés suivantes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
top: 50%;
margin-top: -50px;

dans la mesure où ton div a une hauteur fixe de 100px et est en position absolute...

**Michaël** · 06/12/2005, 20h10

oui mais en position absolue, ça ne donnera pas la même chose pour toutes les résolutions il me semble... perso je bosse en 1280x1024 et si je le mets en absolute, ça va pas aller. il n'existe pas de solution sans passe par absolute ?

**jeff_!** · 06/12/2005, 20h32

je suis pas sur
mais le seul element que l'on peut aligner verticalement c'est les images
va fair eun petit tour sur alsacreatios pour cofirmation

**francis m** · 07/12/2005, 01h24

c'est lourd, mais cela marche : http://www.jakpsatweb.cz/css/css-ver...-solution.html
je n'utilise pas les tableaux pour de la mise en page, mais la je ne suis pas sûr qu'il faille les bannir..

**Trunks** · 07/12/2005, 01h33

Si les tailles sont fixes, je te propose ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
width: 1000px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -500px; /* moitié de width */
margin-top: -300px; /* moitié de height */

Si les tailles sont proportionnelles, je te propose ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
width: 80%;
height: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -10%; /* (100 - width) / 2 */
margin-top: -25%; /* (100 -  height) / 2 */

**Royd938** · 07/12/2005, 10h12

Je ne vois pas en quoi la résolution peut poser de problème avec un positionnement absolute... Si la taille de ton div est fixe, il sera centré quelle que soit la résolution. c'est le but du top 50%...

Aligner verticalement un <div>

HTML

Discussions similaires

Partager

Partager