Maison interface Web tutoriel CSS Comment mettre l'image au milieu avec CSS

Comment mettre l'image au milieu avec CSS

Apr 25, 2024 am 11:51 AM
css Centrer verticalement positionnement absolu

Il existe trois manières principales de centrer une image en CSS : en utilisant display: block et margin: 0 auto;. Utilisez la disposition flexbox ou la disposition en grille et définissez les éléments d'alignement ou la justification du contenu au centre. Utilisez le positionnement absolu, définissez le haut et la gauche sur 50 % et appliquez la transformation : translate(-50%, -50%);.

Comment mettre l'image au milieu avec CSS

Comment centrer une image en CSS

En CSS, utilisez le style CSS suivant pour centrer une image :

#image {
  display: block;
  margin: 0 auto;
}
Copier après la connexion

Plus précisément, ce style CSS fait ce qui suit :

  • Définissez l'image Pour le bloc -éléments de niveau (display: block;) display: block;
  • 将图片的左外边距和右外边距都设置为 0margin: 0 auto;),从而使其在父元素中居中

其他方法

除了上述方法外,还有其他几种使图片居中的方法:

  • 弹性盒子布局(Flexbox):使用 justify-content: center;align-items: center; 属性可以使图片在父元素中水平或垂直居中。
  • 网格布局(Grid):使用 align-items: center;justify-content: center; 属性可以使图片在父元素中居中。
  • 绝对定位:使用 position: absolute; 属性并设置图片的 topleft 属性为 50%,然后将 transform: translate(-50%, -50%); 应用于图片,使其从中心点偏移 -50%
  • Définissez les marges gauche et droite de l'image sur 0 (margin: 0 auto;) , en la centrant ainsi dans l'élément parent

Autres méthodes

En plus des méthodes ci-dessus, il existe plusieurs autres façons de centrer l'image : 🎜🎜🎜🎜Flexbox Layout (Flexbox) 🎜 : Utilisez le justifier-content: center; ou align-items: center; pour centrer l'image horizontalement ou verticalement dans l'élément parent. 🎜🎜🎜Grid🎜 : utilisez l'attribut align-items: center; ou justify-content: center; pour centrer l'image dans l'élément parent. 🎜🎜🎜Positionnement absolu🎜 : utilisez l'attribut position: Absolute; et définissez les attributs top et left de l'image sur 50. % code>, puis appliquez transform: translate(-50%, -50%); à l'image, décalez-la de -50% par rapport au centre indiquer. 🎜🎜🎜🎜Choisissez la méthode la plus appropriée🎜🎜🎜Le choix de la méthode la plus appropriée dépend des besoins spécifiques du projet et du framework CSS utilisé. Pour des besoins de centrage simples, vous pouvez utiliser la première méthode présentée ci-dessus. Pour des mises en page plus complexes, la disposition flexbox ou la disposition en grille peuvent être de meilleurs choix. 🎜

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 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

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Comment écrire des espaces dans vue Comment écrire des espaces dans vue Apr 30, 2024 am 05:42 AM

Comment écrire des espaces dans vue

Comment avoir dom en vue Comment avoir dom en vue Apr 30, 2024 am 05:36 AM

Comment avoir dom en vue

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

Quelle est la fonction de la balise span

Comment envelopper l'invite dans js Comment envelopper l'invite dans js May 01, 2024 am 06:24 AM

Comment envelopper l'invite dans js

See all articles