Quel élément peut être utilisé pour centrer l'image en CSS3-tutoriel CSS-php.cn

Quel élément peut être utilisé pour centrer l'image en CSS3

王林

Libérer： 2020-11-12 09:12:40

original

1512 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'élément [align-items:center] et l'élément [justify-content:center] pour centrer l'image. La propriété align-items définit l'alignement des éléments flexibles le long de l'axe vertical de la ligne actuelle du conteneur flexible.

Quel élément peut être utilisé pour centrer l'image en CSS3

Méthode :

Utilisez les deux attributs align-items:center (centrage vertical) et justifier-content:center (centrage horizontal) .

L'attribut align-items définit l'alignement des éléments flexibles dans la direction de l'axe vertical de la ligne actuelle du conteneur flexible.

(Recommandation vidéo d'apprentissage : tutoriel vidéo CSS)

html :

<div class="container container-2">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

Copier après la connexion

css :

.container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    text-align: center;
}

Copier après la connexion

Très bien, utilisez positionnement absolu + Marge pour y parvenir.

L'image flotte par rapport au calque externe, puis marge : auto

HTML :

<h3 class="demo">绝对定位+Margin</h3>
<div class="container container-1">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

Copier après la connexion

CSS :

.container-1 {position: relative;}

.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

Copier après la connexion

Recommandations associées : Tutoriel 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!