Quelles sont les méthodes pour centrer une image en CSS

Comment centrer les images CSS : 1. Utilisez le style "text-align: center;" 2. Utilisez le style "margin: 0 auto;" 4. Utilisez la disposition en grille ; Utilisez Aligner en positionnement absolu ; 6. Utilisez l'attribut background pour centrer l'image d'arrière-plan.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

html

1. (Le plus simple) Alignement des attributs de texte text-align

text-align contrôle l'alignement des lignes de texte dans les éléments. Vous pouvez définir un div parent dans img, afin que img puisse être le texte du div, puis utiliser text-align pour modifier les attributs du div. (Ajoutez des attributs à l'élément parent)

Remarque: L'élément enfant doit être inline ou inline-block ; si l'élément enfant est également un div, vous devez définir display: inline/inline-block pour l'élément enfant. Ici, l'élément enfant img est en ligne, donc omettez cette étape.Cette méthode convient aux éléments en ligne. Par exemple, le centrage de img

css

2 Utilisez habilement la marge

css

Les trois points ci-dessus sont indispensables.

margin: 0 auto; La condition préalable pour centréest :

• Les éléments en ligne doivent être définis pour afficher : block img doit être défini sur les éléments en ligne. S'il s'agit d'une entrée, il n'est pas nécessaire de le définir.

• Les éléments doivent avoir une largeur ; à l'exception de ceux avec une largeur intégrée, comme le bouton et la saisie.

Selon le principe, il existe une autre méthode : modifier les propriétés de l'élément parent

Pour résumer, cette méthode convient aux éléments de bloc. Par exemple, le centrage de div et input

Limitations de marge : Lors de l'affichage de deux images sur une seule ligne, la marge doit être modifiée en conséquence.

3. Disposition de boîte flexible

css

La disposition de boîte flexible peut utiliser quelques lignes de CSS pour réaliser presque n'importe quelle mise en page. Et le plus étonnant est que même les deux premières rangées de n images peuvent être centrées sans avoir à prendre en compte la disposition et la position de l'image.

4. Disposition en grille

Les boîtes flexibles sont les plus couramment utilisées dans les barres de navigation. En revanche, la disposition en grille est un système de disposition universel.

Il est donc très pratique de résoudre le problème de l'alignement de plusieurs images.

5. Alignement en positionnement absolu

css

La plus grande différence par rapport à la deuxième méthode est que l'utilisation de la marge concerne les éléments de bloc. Si vous utilisez position, vous n'avez pas besoin de définir un bloc. Cependant, la position est généralement utilisée dans la disposition des cadres. S'il s'agit simplement de centrer l'image, cela est excessif et gênant. Non recommandé.

6. L'image de fond est centrée

html

css

Prérequis : Tant que le contenu de l'élément est vide, la hauteur doit être définie. Le contenu du div étant vide, la hauteur doit être définie, sinon le div n'aura pas d'espace et l'image d'arrière-plan ne sera pas affichée. Si c'est un corps, vous n'en avez pas besoin, car le corps a sa propre hauteur.

La limitation de la définition comme image d'arrière-plan est que vous ne pouvez pas définir les attributs de l'image tels que le lien hypertexte, le titre, l'alt, etc. S'il ne s'agit pas d'une image d'arrière-plan, essayez de ne pas utiliser ce format.

(Partage de vidéos d'apprentissage :

Tutoriel vidéo 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!