Alignement vertical d'un élément

**gpsman** · 22/01/2015, 11h06

Bonjour
J'essaie de centrer une boite (blanche) dans un écran (coloré) avec la boite positionnée en haut de l'écran. Mais j'ai toujours un espace entre la boite et le haut de l'écran (IE et Firefox)
Ci-dessous mon code:

fichier index.html

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Titre de la page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" media="all" type="text/css"> 
	</head>
	<body>
		<!-- Corps central-->
		<div id="corps_central">
			<h1>Texte au format h1</h1>
			<p>bla bla bla bla bla bla bla bla bla bla bla bla bla
			<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla
			<p>bla bla bla bla bla bla bla bla&hellip;
		</div>
	</body>
</html>

Fichier style.css

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
/* Initialisation */
html, body
 {
 margin:0;
 padding:0;
 border:0;
 }
body
 {
 background-color: #FFFFCC; 
 }
/* Corps central*/
#corps_central
{
 background-color: white; 
 width: 960px;
 padding-top:0;
 margin-top:0;
 margin: auto;
 }

Merci pour votre aide

**Bisûnûrs** · 22/01/2015, 11h44

Tu peux axer tes recherches sur les termes "fusion des marges".

**gpsman** · 22/01/2015, 12h30

Merci

J'ai résolu le problème en mettant un valeur négative (-20px) à la propriété margin-top de mon élément. Mais je ne comprends pas la logique, car les éléments html et body sont déclarés avec margin, padding et border-style-top à 0

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
/* Initialisation */
html, body
 {
 margin:0;
 padding:0;
 border-top-style:0;
 }
body
 {
 background-color: #FFFFCC; 
 }
/* Corps central*/
#corps_central
{
 background-color: white; 
 width: 960px;
 padding-top:0;
 margin-top:-20px;
 margin-left: auto;
 margin-right:auto;
 border-top-style:0;
 }

**Bisûnûrs** · 22/01/2015, 15h25

T'as pas dû chercher ce qu'était la fusion des marges hein ?

**gpsman** · 22/01/2015, 16h05

A priori si, mais des marges nulles (padding, margin et border) qui fusionnent ou s'additionnent, cela devrait faire une marge résultante nulle.

Mais j'ai surement raté quelque chose

**Bisûnûrs** · 22/01/2015, 16h11

Ton élément h1 a des marges non nulles par défaut qui fusionnent avec ses parents.

Alignement vertical d'un élément

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager