Maison  >  Article  >  interface Web  >  Comment écrire le centre en HTML

Comment écrire le centre en HTML

下次还敢
下次还敢original
2024-04-27 21:15:41869parcourir

En HTML, l'alignement central peut être obtenu à l'aide des styles CSS : Centrage horizontal : utilisez l'attribut text-align (tel que text-align : center ;) Centrage vertical : utilisez l'attribut vertical-align (tel que vertical-align : middle ;)

Comment écrire le centre en HTML

Centrage en HTML

En HTML, nous pouvons contrôler l'alignement central des éléments en utilisant des styles CSS. Il existe deux manières de réaliser le centrage : Centrage horizontal et Centrage vertical.

Centrage horizontal

Vous pouvez utiliser l'attribut text-align pour centrer l'élément horizontalement. La valeur de cette propriété peut être : text-align 属性将元素水平居中。该属性的值可以是:

  • left: 将元素左对齐
  • center: 将元素居中对齐
  • right: 将元素右对齐

例如,要水平居中一个段落,可以使用以下代码:

<code class="html"><p style="text-align: center;">水平居中的段落</p></code>

垂直居中

要垂直居中一个元素,可以使用 vertical-align

  • left : Aligner l'élément à gauche
  • center : Aligner l'élément au centre
  • right : Aligner l'élément à droite
Par exemple, pour centrer un paragraphe horizontalement , vous pouvez utiliser le code suivant :

<code class="html"><img src="image.jpg" style="vertical-align: middle;"></code>

Vertical Centering

Pour centrer verticalement un élément, vous pouvez utiliser l'attribut vertical-align. La valeur de cette propriété peut être : 🎜🎜🎜🎜top : 🎜 Alignez l'élément en haut 🎜🎜🎜middle : 🎜 Alignez l'élément verticalement au centre 🎜🎜🎜bottom : 🎜 Alignez l'élément en bas 🎜🎜🎜 Par exemple, pour centrer verticalement un image, Vous pouvez utiliser le code suivant : 🎜
<code class="css">.centered {
  text-align: center;
  vertical-align: middle;
}</code>
🎜 Vous pouvez également utiliser la règle CSS suivante pour réaliser un centrage horizontal et vertical : 🎜rrreee🎜L'application de cette classe à un élément le centrera à la fois horizontalement et verticalement. 🎜

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!

Déclaration:
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