Maison > interface Web > tutoriel CSS > le corps du texte

code CSS pour le centrage div

下次还敢
Libérer: 2024-04-25 14:24:17
original
500 Les gens l'ont consulté

Utilisez text-align: center pour centrer un div horizontalement en HTML. Les étapes pour le centrage vertical sont les suivantes : Définissez la hauteur du div et la hauteur de la ligne verticale. Utilisez margin: 0 auto pour centrer verticalement le contenu. Le centrage peut également être réalisé à l’aide d’une disposition flexbox ou en grille.

code CSS pour le centrage div

Code CSS pour div centré

Div centré

En HTML, un div est un élément de niveau bloc qui est aligné horizontalement à gauche sur la page par défaut. L'alignement central peut être obtenu à l'aide des propriétés CSS.

Centrage horizontal

Utilisez l'attribut text-align pour centrer le contenu d'un div horizontalement. text-align属性可以水平居中div的内容。

<code class="css">div {
  text-align: center;
}</code>
Copier après la connexion

垂直居中

垂直居中div的内容比较复杂,需要使用以下步骤:

  1. 设置div的高度和一个垂直线。
  2. 使用margin
    <code class="css">div {
      height: 200px;  /* 设置div的高度 */
      line-height: 200px;  /* 设置垂直线的高度 */
      margin: 0 auto;  /* 将内容垂直居中 */
    }</code>
    Copier après la connexion
Centré verticalement

Le contenu des divs centrés verticalement est plus compliqué et nécessite les étapes suivantes :

  1. Définissez la hauteur du div et une ligne verticale.

  2. Utilisez l'attribut margin pour centrer le contenu verticalement.

    <code class="css">div {
      display: flex;
      justify-content: center;
      align-items: center;
    }</code>
    Copier après la connexion
    Utilisez flexbox pour centrer

    Vous pouvez également utiliser la disposition flexbox pour centrer le div. 🎜
    <code class="css">div {
      display: grid;
      place-items: center;
    }</code>
    Copier après la connexion
    🎜🎜Utiliser la disposition en grille pour centrer 🎜🎜🎜la disposition en grille peut également être utilisée pour centrer les divs. 🎜rrreee

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!

source:php.cn
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
Tutoriels populaires
Plus>
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!