3 Methoden: 1. Verwenden Sie das text-align-Attribut, um „text-align: center;“ auf das übergeordnete Element festzulegen, das img enthält. 2. Verwenden Sie das flexible Box-Layout und stellen Sie „display: flex;justify-content: center;“ auf das übergeordnete Element ein. 3. Verwenden Sie das Rasterlayout und setzen Sie „display:grid;align-items:center;justify-items:center;“ auf das übergeordnete Element.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1: Verwenden Sie das Textausrichtungsattribut text-align
text-align, um die Ausrichtung von Textzeilen im Element zu steuern. Sie können ein übergeordnetes Div für img 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 ebenfalls ein div ist, müssen Sie display: inline/inline-block für das untergeordnete Element festlegen Das Element img ist hier inline, daher überspringen Sie diesen Schritt. Diese Methode eignet sich für Inline-Elemente wie die Zentrierung von img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#pic {
border: 1px solid red;
text-align: center; /*表示div的子元素居中*/
}
</style>
</head>
<body>
<div id="pic">
<img src="img/2.jpg" class="logo" alt="Img in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll" >
</div>
</body>
</html>Methode 2: Flexibles Box-Layout verwenden
css
#pic {
display: flex;
justify-content: center;
}
Das flexible Box-Layout kann ein paar Zeilen CSS verwenden um fast alles Layout zu erreichen. 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.
Methode 3: Rasterlayout verwenden
Flexible Boxen 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; /*行内方向（横向）所有的元素中线对齐*/
}
Damit kann das Problem der Ausrichtung mehrerer Bilder sehr bequem gelöst werden.
(Lernvideo-Sharing: Web-Frontend)
Das obige ist der detaillierte Inhalt vonImg in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
