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

 <div id="pic">
        <img src=star.jpg class="logo">
 </div>

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

#pic {
    text-align: center;   /*表示div的子元素居中*/
}

2 Utilisez habilement la marge

css

img {
    display: block;    
    width: 100px;
    margin: 0 auto;
}

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

#pic {
    width: 100px;
    margin: 0 auto;
}    /*父元素div属于block，所以不用再设 display: block;*/

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

#pic {
    display: flex;   
    justify-content: center;
    }

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.

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

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

5. Alignement en positionnement absolu

css

#pic {
    position: relative;   /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
    position: absolute;   
    right: 1em; left: 1em;     //表示左右距离相等
    margin: 0 auto;         //与方法二相似
}

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

<div></div>

css

div {
    height: 1000px;  /*高度非常重要*/
    background: url(star.jpg) no-repeat top center; 
}

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!