Bonjour,
Je n'arrive pas à centrer mes textes à l'intérieur de mes flexbox, voir capture d'écran ci-dessous :
01.png
Voici le code que j'ai actuellement :
<!DOCTYPE html>
<html>
<body id="body">
<link rel="stylesheet" type="text/css" href="main.css" />
<div class="intro" id="intro">
<div class="name" id="name">name</div>
<div class="company" id="company">company</div>
<div class="year" id="year">2022</div>
</div>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
</body>
</html>
html,
body {
margin: 0;
height: 100%;
background: black;
}
#intro {
display: flex;
height: 100vh;
flex-direction: column;
align-items: center;
gap: 10px;
background: blueviolet;
}
@font-face {
font-style: normal;
}
#name {
background-color: rgb(0, 249, 249);
flex: 1;
font-size: 20px;
color: #ffffff;
}
#company {
text-align: center;
background-color: red;
flex: 2;
font-size: 80px;
text-align: center;
color: #ffffff;
}
#year {
background-color: green;
flex: 1;
font-size: 20px;
font-family: "Rubik";
color: #ffffff;
}
Voici également un codepen qui illustre bien mon souci :
https://codepen.io/ogames/pen/rNvrrrQ
Ce que je veux
-
Avoir mes textes centrés verticalement par rapport à mes boites. ex: 'company" devrait être axé au milieu de la boite rouge sur l'axe Y.
-
Pouvoir utiliser les propriétés de dimensionnement avec flex afin de composer mes titres/informations en entrant des valeurs spécifiques pour mes différents éléments, exemple :
#company
flex : 2;
...
Ce que j'obtiens
Mes textes sont calés vers le haut, peu importe que je spécifie dans #intro:
align-items: center;
align-content : center;
Pourquoi ?
espace3d
