28172 sujets

CSS et mise en forme, CSS3

Comment centrer 1 en-tête au lieu de tous ?

J'essaie de centrer l'en-tête en haut de la page sans que le reste ne soit également central. Je mets le text-align: center sur la première ligne h1 de mon fichier CSS mais tous les en-têtes qui sont h1 bougent également. Comment puis-je arrêter cela ? Massivement nouveau dans ce domaine, comme cela est probablement évident. https://9apps.ooo/
Modifié par endros (27 Jun 2022 - 11:32)
Modérateur
Bonjour,

Tu peux utiliser une classe soit spécifique a ton titre (.first_title par ex) soit générique (.text_center par ex) et l'appliquer seulement sur ton titre :

<h1 class="text_center">Titre centré</h1>
<h1>titre</h1>

.text_center {
  text-align: center;
}


Apres, l'utilisation des class c'est un peut le point central du CSS, si tu dois te lancer dans le web, je te conseille de lire 1 ou 2 tuto pour connaitre au moins ces bases Smiley cligne

Bon code !
Administrateur
kerlutinoec a écrit :
Après il n'est censé n'y avoir qu'un h1 par page...

Non pas forcément, pourquoi ?
<h1> n'est pas le titre unique du document (ça c'est <title>), ce n'est qu'un titre de section comme le seraient des chapitres d'un livre.
Effectivement, il fut un temps ou un seul h1 par page était préconisé. A la naissance de HTML5 ce dogme fut remis en cause.
Je pensais aussi qu'il ne devait y avoir qu'un seul <h1> par page, mais en effet le validateur ne signale plus de problème. Tout change trop vite Smiley smile

Pour répondre à la question de départ, le plus simple est sans doute d'utiliser une classe, comme cela a été dit.
Pour généraliser, il y a un sélecteur qui s'applique seulement au premier élément d'un même type. Mais cette logique s'applique pour chaque container. Autrement dit, si les <h1> sont par exemple dans des balises <section> différentes, cela ne fonctionnera pas.
Mais on peut quand même jeter un oeil sur :first-of-type.
Sujet clos
Aller à