Méthode de centrage d'image CSS à taille variable

CSS est un langage indispensable pour le développement front-end. Cet article présente principalement l'exemple de centrage CSS de la méthode de centrage d'image à taille variable. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et le donner. comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Utilisez table-cell pour obtenir un centrage vertical

<p class="box1">
    [站外图片上传中……(5)]
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

Utilisez l'élément parent pour implémenter le centrage vertical pour le type display:table-cell Le tableau a l'attribut de centrage vertical fourni avec le navigateur IE8+.

Remarque : img{vertical-align: middle;} sert simplement à éliminer le problème d'alignement de base du type display:inline-block.

2. Méthode de centrage vertical du texte multiligne

Parfois, nous pouvons rencontrer des situations où le texte multiligne doit être centré verticalement, mais parfois, c'est un peu difficile à faire et nous devons changer notre façon de penser pour y parvenir.

<p class="box3">
    <span>你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据</span>
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

Enveloppez le texte interne avec des balises span (d'autres balises sont également acceptables) et définissez la balise span Il s'agit d'un bloc en ligne, puis traité lorsque l'image est centrée verticalement (ie8+).

Recommandations associées :

Trois façons de centrer les images avec CSS

Comment centrer le texte et les images avec du code HTML ?

Comment centrer l'image CSS

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!