suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Img in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll

Img in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll

青灯夜游
青灯夜游Original
2022-09-22 17:28:222243Durchsuche

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.

Img in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll

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>

Img in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll

Methode 2: Flexibles Box-Layout verwenden

css

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

Img in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll

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;  /*行内方向（横向）所有的元素中线对齐*/
}

Img in CSS kennt die Breite und Höhe nicht und weiß nicht, wie eine Zentrierung erreicht werden soll

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Welche Rolle spielt CSS im Web?Nächster Artikel：Welche Rolle spielt CSS im Web?

In Verbindung stehende Artikel

Mehr sehen