centrer verticalement et horizontalement le contenu d'une page

**ouldfella** · 31/01/2012, 11h35

bonjour,
je ttrouve un problème à center verticalement et horizontalement une image contenue dans une page html avec css

**Ctesias** · 31/01/2012, 16h38

Salut!

Alors pour centrer horizontalement une div. tu fais:

Code :

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

1
2
3
4
5
6
 
#element
{
margin-left: auto;
margin-top: auto;
}

Et puis pour un centrage verticale, tu as deux possibilité: La première en css, qui se fait avec un :

Code :

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

1
2
3
4
5
 
#element
{
vertical-align:middle;
}

Mais tu risque fortement que cela ne te convienne pas. Dans ce cas, tu as une autre possibilité, c'est de passer par du javascript comme je le fais actuellement ici :

http://www.developpez.net/forums/d11...juster-taille/

Cordialement,

Ctesias

**ouldfella** · 01/02/2012, 10h13

bonjour,
merci pour la réponse,
au fait, vortre code marche mais pas pour center des élément par raport à la page html,
voici un exemple de code avec css et pour éviter javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
html {
    height: 100%;
}
body {
	height: 100%;
    margin: 0;
}
.c1{ 
vertical-align:middle; 
text-align:center;
height:100%;
width:100%;
border:1px solid #FF0000;
}
</style>
</head>
 
<body>
<table class="c1"><tr><td>test centrer du texte </td></tr>
</div>
</body>
</html>

**Ctesias** · 01/02/2012, 11h20

Euh si mon code marche pour centrer les éléments sur une page html ^^'. Mais dans ce que je recherche, le css n'est pas une idée valable

**NoSmoking** · 01/02/2012, 19h35

Envoyé par ouldfella

Code :

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

1
2
3
4
5
6
7
<body>
<table class="c1">
<tr><td>test centrer du texte </td></tr>
</div>
</body>
</html>

c'est une façon singulière de refermer une balise TABLE avec une balise DIV, quant à centrer via une TABLE cela reste une solution bien qu'il existe maintenant le display:table-cell, sauf qu'il me semble que IE ne le gère pas.

**ouldfella** · 06/02/2012, 10h13

bonjour,
c'est une erreur de sasie la table est fermé avec la balise </table>

j'ai essayé display:table-cell
ça fonctionne pas
merci pour vos réponses

**NoSmoking** · 08/02/2012, 23h35

tu peux également utiliser la technique dite des marges négatives
exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[CSS Centrage vertical]</title>
<style type="text/css">
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
#element{
  position : relative;
  border:1px solid blue;
  /* centrage horizontal */
  width:400px;
  margin-left:auto;
  margin-right:auto;
  /* centrage vertical */
  height:300px;
  top:50%;
  margin-top:-150px; /* moitié de la hauteur */
}
</style>
</head>
<body>
<div id="element"></div>
</body>
</html>

centrer verticalement et horizontalement le contenu d'une page

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager