Comment centrer verticalement une image en CSS-tutoriel CSS-php.cn

Comment centrer verticalement une image en CSS

云罗郡主

Libérer： 2018-11-23 13:50:18

original

9278 Les gens l'ont consulté

Comment centrer l'img en css ? Comment centrer verticalement une image ? Les débutants qui viennent de commencer à utiliser CSS ne le connaissent peut-être pas très bien. Résumons comment centrer verticalement img en CSS ?

Comment centrer verticalement une image en CSS

Il existe de nombreuses façons de centrer verticalement img, y compris les trois méthodes suivantes

1 Utilisez flex pour centrer verticalement img<.>

En CSS, nous pouvons utiliser flex pour réaliser un centrage vertical, mais flex n'est pas une bonne méthode. De nombreux navigateurs ne prennent désormais pas en charge flex, comme IE8 et 9.

Tout d'abord, nous devons ajouter un div à l'image de support, la définir avec une largeur de 100 px et une hauteur de 100 px, et définir quelques attributs de base pour celle-ci, parmi lesquels nous définissons l'affichage. élément dans le div à flex, puis ajoutez l'attribut align-items: center à un autre.

Code CSS :

body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

Copier après la connexion

2. Utilisez l'affichage pour réaliser le centrage vertical de l'img

Nous devons d'abord créer un div et définir le style du div de l'image, nous pouvons ajouter une boîte de dialogue au parent de l'img, et définir l'attribut sur table, et définir l'attribut d'affichage dans le div contenant l'image sur table-cell. En fait, ce que nous avons. à faire pour réaliser le centrage est de donner le div avec l'image. Il suffit de définir le div sur l'attribut vertical-align: middle;

Code CSS :

.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

Copier après la connexion

3. Utiliser le positionnement absolu de l'image pour réaliser

Nous définissons le div avec l'image pour avoir un arrière-plan. Et ajoutez des attributs relatifs à l'élément parent de img, ajoutez des attributs absolus et relatifs aux éléments enfants et définissez la valeur supérieure à 50 %. Ce que nous devons faire maintenant est de définir une valeur de marge supérieure négative pour l'img. élément.

Code CSS :

body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

Copier après la connexion

Nous vous recommandons d'utiliser la troisième méthode parmi les trois méthodes ci-dessus. La troisième méthode a une meilleure compatibilité et est relativement simple. L'accent est mis sur la maîtrise des méthodes et des principes. .

Ce qui précède est l'introduction complète sur la façon de centrer verticalement une image avec CSS. Si vous voulez en savoir plus sur le

Tutoriel CSS3, veuillez faire attention au site Web chinois php.

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!