Centrer verticalement une zone de texte

Fermé
AyS0908 - 26 août 2021 à 23:40
 AyS0908 - 27 août 2021 à 11:46
Bonsoir,
Je débute tout juste en css pour l'utiliser dans un outil nocode (Glide).
Je souhaiterais centrer verticalement les 2 éléments (émoji + texte) d'une zone de RichText, mais mon code ne semble pas fonctionner.

<div style ="background-color:#00559c;
border-radius: 5px;
height: 60px;
text-color:#ffffff";
<br>
<h2>
<div style = "text-align : left;
padding-left : 10px">
????️
</div>
<div style = "text-align : center">
SUMMARY
</div>
</h2>

Merci bcp d'avance

Configuration: Windows / Chrome 92.0.4515.159

2 réponses

Salut,
vous pouvez jouer sur les marges pour ça comme vous avez fait avec le padding-left mais pour top et bottom.
Remarques:
  • Il est nettement mieux d'écrire le CSS en utilisant des class comme ceci

<style rel="stylesheet" type="text">
.centrer-vertical{
margin-top:40%;
margin-bottom:40%;
}
</style>
<p class=centrer-vertical >
mon texte prends 20% du restant(40% en haut+40% en bas = 80% sont des marges externes) et est centré verticalement
</p>
Ou encore mieux dans un fichier externe styles.css inclus en hypertexte par la balise link.

En tout cas l'attribut 'style' rends l'ensemble illisible, casse pied à modifier et ne peut pas être réutilisé.
En séparant ça reste clair et réutilisable avec une class CSS. Ou ID si les propriétés doivent être uniques. Voir aussi les autres types de sélecteurs CSS.
  • DIV est un élément qui ne correspond à aucun élément particulier. Il ne désigne donc pas une zone de texte et ne doit pas être utilisé ...pour une zone de texte.

C'est la balise "p" qui permet cela, span éventuellement.
Voir aussi les balises section, article (et un entête)pour plus de détails sur la formation correcte de HTML5 car la balise div doit être utilisée uniquement pour des éléments qui n'ont aucune désignation dans la page(et ne seront pas référencés selon le type de contenu donc).
1
Merci beaucoup !
0