简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

Comment centrer la balise principale html5 ? Un exemple de centrage de la balise principale

寻∝梦
Libérer： 2018-08-31 14:02:20
original
4911 Les gens l'ont consulté

Cet article présente principalement le centrage de la balise principale HTML5. Il existe des exemples complets d'utilisation de la balise principale. Jetons maintenant un coup d'œil à cette introduction sur la balise principale HTML5

Tout d'abord, Voyons comment centrer la balise principale html5 : la balise

spécifie le contenu principal du document. Le contenu de l'élément

doit être unique au document. Il ne doit pas contenir de contenu qui apparaît de manière répétée dans le document, tel que des barres latérales, des barres de navigation, des informations sur les droits d'auteur, des logos de sites ou des formulaires de recherche.

Remarque : Plus d'un élément

ne peut pas apparaître dans un document. L'élément
ne peut pas être un descendant de
,

Après avoir dit tant de définitions, jetons un coup d'œil à l'exemple de code complet de centrage de la balise main : 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<main align="center">
  <h1>PHP中文网</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome是由Google开发的一款免费的开源web浏览器，于2008年发布。</p>
  </article>
  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer由微软开发的一款免费的web浏览器，发布于1995年。</p>
  </article>
  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox是一款来自Mozilla的免费开源web浏览器，发布于2004年。</p>
  </article>
</main>
</body>
</html>
Copier après la connexion

J'ai ajouté un attribut align à la balise main balise. Cela signifie aligner l'ensemble du document au milieu. Voyons l'effet lorsqu'il est affiché dans le navigateur :

Comment centrer la balise principale html5 ? Un exemple de centrage de la balise principale

Vous pouvez le voir clairement car l'article est trop gros pour être affiché. La page Web est trop grande et ne peut être que réduite, mais le texte au milieu des images est toujours clairement visible.

D'accord, cet article se termine ici (si vous voulez en savoir plus, venez sur le site Web PHP chinois, recherchez le site Web PHP chinois sur Baidu, il contiendra les cours et le matériel de programmation que vous souhaitez), si vous en avez questions Vous pouvez poser des questions ci-dessous

[Recommandation de l'éditeur]

Comment supprimer l'étiquette de la balise ol en html ? Résumé de l'utilisation de


    Comment supprimer le point de la balise ul en HTML ? Analyse d'instance de style de liste HTML non ordonnée

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Étiquettes associées：
    align html main
    source：php.cn
    Article précédent：Qu’est-ce que la technologie hors écran sur toile ? Comment obtenir un effet loupe sur toile ? Article suivant：Quelles sont les nouveautés de html5 ? Résumé des nouvelles fonctionnalités de html5
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
    Depuis 2024-04-06 20:22:15
    0
    1
    454
    Corriger la position de l'image et du nom J'essaie de coder un site Web, mais l'image et le nom (Administracija) apparaissent sur le...
    Depuis 2024-04-05 10:41:36
    0
    1
    3578
    L'actualisation forcée est une conséquence de l'accès à des chemins non définis ou à des pages d'erreur dans Next.js L'accès à un chemin non défini ou à une page d'erreur entraîne une actualisation matériell...
    Depuis 2024-04-05 08:32:46
    0
    1
    400
    Les symboles d'élément de liste (<ul> et <ol>) dans le nœud racine ne peuvent pas être affichés et supprimés en CSS, et le problème overflow-x: caché ne peut pas être supprimé. Je travaille actuellement sur une page Web et j'ai des problèmes avec les éléments de ma l...
    Depuis 2024-04-04 16:38:22
    0
    1
    3617
    Vanilla JS setTimeout() : identifier un mauvais comportement J'ai une animation sur mon menu hamburger écrite en HTML, CSS et JavaScript vanille. Résul...
    Depuis 2024-04-02 20:44:40
    0
    1
    284
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！