Bonjour,
Je voudrais centrer deux lignes de texte avec flexbox cette fois. Mais ça ne fonctionne pas, le texte est plus ou moins centré mais pas vraiment. J'aimerais qu'il soit pile au centre sans valeurs aléatoires. Pourriez-vous m'aider s'il vous plait?
La partie html
<!DOCTYPE html>
<html>
<head>
<title>Coming soon</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="mafeuillede.css"/>
</head>
<body>
<div class="banner">
<div class ="banner-texte">
<h1>textef</h1>
<p>retexte</p></div>
</div>
</body>
</html>
Ma feuille de css.
html,body{
height:100%;
}
h1{
font-size:2vw;
font-family:Arial;
}
h2{
font-size:1vw;
font-family:Arial;
}
.banner h1, .banner h2{
margin: 0;
text-align:center;
}
.banner{
height:100%;
display:flex;
align-items: center;
justify-content: center;
}
Je voudrais centrer deux lignes de texte avec flexbox cette fois. Mais ça ne fonctionne pas, le texte est plus ou moins centré mais pas vraiment. J'aimerais qu'il soit pile au centre sans valeurs aléatoires. Pourriez-vous m'aider s'il vous plait?
La partie html
<!DOCTYPE html>
<html>
<head>
<title>Coming soon</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="mafeuillede.css"/>
</head>
<body>
<div class="banner">
<div class ="banner-texte">
<h1>textef</h1>
<p>retexte</p></div>
</div>
</body>
</html>
Ma feuille de css.
html,body{
height:100%;
}
h1{
font-size:2vw;
font-family:Arial;
}
h2{
font-size:1vw;
font-family:Arial;
}
.banner h1, .banner h2{
margin: 0;
text-align:center;
}
.banner{
height:100%;
display:flex;
align-items: center;
justify-content: center;
}
