centrer verticalement un texte h2 Dans un element flexbox

flexbox

a marqué ce sujet comme résolu.

bonjour j ai créé un conteneur flex avec trois elements (cube avec titre h2) j ai reussi a centrer horizontalement le titre mais pas verticalement quelqun a une idee?000000000000000000000000000 mon code html:

<!DOCTYPE html>

<html> <head><meta charset="utf-8" /> <link rel="stylesheet" href="style23.css"> </head> <body><h1>presentation de l essai flexbox</h1> <Div id="conteneur"> <div class="element"><h2>lepremier-élement</h2></div> <div class="element"><h2>le deuxieme-élement</h2></div> <div class="element"><h2>le troisieme-élement</h2></div> </Div> </body> </html> mon code css3 #conteneur { display:flex; border:5px solid black; height:150px; width:1800px; align-items:center; justify-content:center; } .element:nth-child(1) { height:150px; background:yellow; width:600px; } .element:nth-child(2) { height:150px; width:600PX; background:red;

} .element:nth-child(3) { height:150px; background:orange; width:600px; }

MERCI :)

+0 -0

Salut @AlainPierreSardou, si tu veux faciliter la tâche des autres tu peux formater ton code, par exemple 3 backticks (```) pour des blocs de code ou un seul backtick pour des bouts en ligne (`)

Par exemple pour un bloc de HTML :

```html
<p>Voici mon bout de code</p>
```

Cela permettra de présenter ton HTML proprement, avec numérotation des lignes et une colorisation pour que tout le monde s’y retrouve et puisse référencer des modifications possibles ;)

+0 -0

Un backtick est le caractère que j’ai mis entre parenthèses dans ma première phrase, c’est ce qui sert à faire un accent grave.

C’est le caractère utilisé en MarkDown (le format utilisé sur ZdS pour la mise en forme des messages) pour signifier du code. ;)

Plus d’infos : https://zestedesavoir.com/tutoriels/249/rediger-sur-zds/

+0 -0

Bonjour, essaie avec ce css.

#conteneur { display:flex; border:5px solid black; height:150px; width:1800px;flex-direction: row;} 
.element {display: flex; height:150px; width:600px;justify-content: center;align-items: center;} 
.element:nth-child(1) {background:yellow;} 
.element:nth-child(2){background:red;} 
.element:nth-child(3) {background:orange;}
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte