28172 sujets

CSS et mise en forme, CSS3

Positionnement CSS

Bonjour, je suis en train de créer un site web toutefois je suis face a un problème. Je souhaite centrer les éléments au centre. J'ai donc écrit ce code qui fonctionne :

body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #161623;
}


Cependant je souhaite avoir ma balise header qui ne suit pas les même propriété que body. Je veux qu'il soit tout en haut mais celui ci est centré.

Savez vous comment dissocier les propriété de body sur header ?
Modifié par Felipe (26 Apr 2021 - 13:59)
Administrateur
Bonjour et bienvenue, Smiley smile

En choisissant de conserver Flexbox et en centrant le contenu principal non pas par rapport à la page mais par rapport à la place restante, celle qu'il occupe, cela donne :

https://jsfiddle.net/z27eqor5/
<body>
  <header>
    <p>En-tête</p>
  </header>

  <main>
    <p>Contenu</p>
  </main>
</body>


html,
body {
  margin: 0;
}

body {
	display: flex;
  flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
  color: white;
	background: #161623;
  outline: 1px dashed white;
  outline-offset: -1px;
}

header,
main {
  padding: 1rem;
  text-align: center; /* centrage horizontal */
  outline: 1px dotted yellow;
}

main {
  flex-grow: 1; /* ce flex item prend toute la place disponible */
  display: flex; /* et en même temps? c'est un flex container */
  justify-content: center;
  align-items: center;
  background-color: darkslateblue;
}


2 difficultés quand on débute avec Flexbox :
- on travaille en colonne et cela inverse les axes que sont justify-content (plus de gauche à droite mais de haut en bas) et align-items (plus verticalement mais horizontalement. 'fin plus besoin ici)
- header et main sont 2 flex items du flex container body. main est en plus un flex container.

C'est plus simple enfin plus maintenable avec Grid Layout mais 1 chose à la fois Smiley ravi
Modérateur
Bonjour,

Sans ton HTML , difficile de te répondre efficacement .
Quelles sont les balises enfants directes de body ? ... header enfant directe de body ? ,et le reste ?

Selon ta structure, flex-direction peut avoir a être redéfinie. ou le display:flex/grid reporté sur un autre élément.

enfin , align-items/justify-contents peuvent prendre différentes valeurs, les enfant peuvent aussi être réaligner via un margin-x:auto / align-self.

Cdt
Sujet clos
Aller à