Welche Möglichkeiten gibt es, Bilder in CSS zu zentrieren?

So zentrieren Sie CSS-Bilder: 1. Verwenden Sie den Stil „margin: 0 auto;“. Verwenden Sie „Ausrichten“ bei der absoluten Positionierung. 6. Verwenden Sie das Hintergrundattribut, um das Hintergrundbild zu zentrieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

html

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

1. (Die einfachste) Textattributausrichtung text-align

text-align steuert die Ausrichtung von Textzeilen in Elementen. Sie können in img ein übergeordnetes Div festlegen, sodass img der Text des Div sein kann, und dann text-align verwenden, um die Div-Attribute zu ändern. (Attribute zum übergeordneten Element hinzufügen)

Hinweis: Das untergeordnete Element muss inline oder inline-block sein; wenn das untergeordnete Element auch ein div ist, müssen Sie display: inline/inline-block für das untergeordnete Element festlegen. Hier ist das untergeordnete Element img inline, daher lassen Sie diesen Schritt aus. Diese Methode eignet sich für Inline-Elemente. Zum Beispiel die Zentrierung von img

css

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

2. Marge geschickt einsetzen

css

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

Die oben genannten drei Punkte sind unverzichtbar.

margin: 0 auto; Die Voraussetzung für zentriert ist:

• Inline-Elemente müssen auf display:block eingestellt sein; img muss auf Inline-Elemente eingestellt sein. Wenn es eingegeben wird, muss es nicht festgelegt werden.

• Elemente müssen eine Breite haben, mit Ausnahme derjenigen mit integrierter Breite, wie z. B. Schaltfläche und Eingabe.

Der Prämisse zufolge gibt es eine andere Methode – das Ändern der Eigenschaften des übergeordneten Elements

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

Zusammenfassend lässt sich sagen, dass diese Methode für Blockelemente geeignet ist. Zum Beispiel die Zentrierung von div und input

Randbeschränkungen: Wenn zwei Bilder in einer Zeile angezeigt werden, muss der Rand entsprechend geändert werden.

3. Flexibles Box-Layout

css

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

Mit dem flexiblen Box-Layout kann mit ein paar CSS-Zeilen fast jedes Layout erreicht werden. Und das Erstaunlichste ist, dass sogar die oberen beiden Reihen von n Bildern zentriert werden können, ohne dass das Bildlayout und die Position berücksichtigt werden müssen.

4. Rasterlayout

Flexible Felder werden am häufigsten in Navigationsleisten verwendet. Im Gegensatz dazu ist das Rasterlayout ein universelles Layoutsystem.

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

Es ist also sehr praktisch, das Problem der Ausrichtung mehrerer Bilder zu lösen. 5. Ausrichtung bei der absoluten Positionierung Wenn Sie Position verwenden, müssen Sie keinen Block festlegen. Die Position wird jedoch im Allgemeinen beim Rahmenlayout verwendet, wenn nur das Bild zentriert werden soll. Dies ist übertrieben und mühsam. Nicht empfohlen.

6. Das Hintergrundbild ist zentriert

html

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

css

dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68

Voraussetzung: Solange der Elementinhalt leer ist, muss die Höhe eingestellt werden. Da der Div-Inhalt leer ist, muss die Höhe festgelegt werden, andernfalls hat das Div keinen Platz und das Hintergrundbild wird nicht angezeigt. Wenn es ein Körper ist, braucht man ihn nicht, denn der Körper hat seine eigene Höhe.

Die Einschränkung beim Festlegen als Hintergrundbild besteht darin, dass Sie die Attribute des Bildes wie Hyperlink, Titel, Alt usw. nicht festlegen können. Wenn es sich nicht um ein Hintergrundbild handelt, versuchen Sie, dieses Format nicht zu verwenden.

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Bilder in CSS zu zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!