paramètre du centre HTML

Paramètre de centrage HTML

Dans la conception Web, il est très courant de centrer le texte, les images et d'autres éléments. Ce qui suit présentera plusieurs paramètres de centrage HTML.

1. Centrage du texte

Vous pouvez utiliser l'attribut text-align pour obtenir l'effet de centrage horizontal du texte, comme indiqué dans le code suivant :

<p style="text-align:center;">这是一段居中的文本。</p>

Si vous souhaitez centrer le texte verticalement, vous pouvez utiliser la ligne Attribut -height et attribut height, comme indiqué dans le code suivant Affichage :

<style>
.container {
  height: 300px;
  line-height: 300px;
  text-align: center;
}
</style>

<div class="container">这是一段居中的文本。</div>

2. Centrer l'image

Vous pouvez utiliser l'attribut margin en CSS pour obtenir l'effet de centrage horizontal de l'image, comme indiqué dans le code suivant :

<style>
.container {
  text-align: center;
}
img {
  margin: 0 auto;
}
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

Si vous souhaitez que l'image soit centrée verticalement, vous pouvez utiliser l'attribut position et l'attribut top, comme suit Le code est affiché :

<style>
.container {
  position: relative;
  height: 400px;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

3. Centrez le conteneur

Si vous souhaitez que tout le conteneur soit centré , vous pouvez utiliser l'attribut display et l'attribut margin en CSS, comme indiqué dans le code suivant :

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}
</style>

<div class="container">
  <p>这是一个居中的容器。</p>
</div>

Ci-dessus, plusieurs méthodes de centrage HTML couramment utilisées peuvent être utilisées de manière flexible selon les besoins.

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!