Welches Element kann verwendet werden, um das Bild in CSS3 zu zentrieren

In CSS3 können Sie das Element [align-items:center] und das Element [justify-content:center] verwenden, um das Bild zu zentrieren. Die Eigenschaft align-items definiert die Ausrichtung von Flex-Elementen entlang der vertikalen Achse der aktuellen Zeile des Flex-Containers.

Methode:

Verwenden Sie die beiden Attribute align-items:center (vertikale Zentrierung) und justify-content:center (horizontale Zentrierung). Die Eigenschaft

align-items definiert die Ausrichtung von Flex-Elementen in der vertikalen Achsenrichtung der aktuellen Zeile des Flex-Containers.

(Lernvideo-Empfehlung: css-Video-Tutorial)

html:

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

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

Sie können dies auch mit absoluter Positionierung + Marge erreichen.

Das Bild schwebt relativ zur äußeren Ebene und dann Rand: automatisch

Das obige ist der detaillierte Inhalt vonWelches Element kann verwendet werden, um das Bild in CSS3 zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!