Erfahren Sie, wie Sie ein Bild mit CSS zentrieren

Beim Webdesign sind Bilder normalerweise ein integraler Bestandteil. Wenn Bilder nicht den Designspezifikationen entsprechen oder nicht zentriert sind, kann dies das Layout und die Ästhetik der gesamten Website zerstören. Daher ist die Frage, wie man das Bild zentriert, zu einem wichtigen Thema geworden. In CSS stehen verschiedene Methoden zur Verfügung, um ein Bild horizontal und vertikal zu zentrieren. In diesem Artikel schauen wir uns an, wie man ein Bild mit CSS zentriert.

1. Horizontal zentrieren

1. margin:auto

Die Verwendung von margin:auto ist eine einfache und häufig verwendete Methode, mit der das Bild horizontal zentriert werden kann. Diese Methode setzt die linken und rechten Werte des Randattributs auf auto (margin: 0 auto;), wodurch das Element horizontal in seinem Container zentriert werden kann und für ein einzelnes Bild geeignet ist.

Der folgende Code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  margin: 0 auto;
}

Verwenden Sie margin:auto, um eine horizontale Zentrierung zu erreichen. Hier stellen wir den linken und rechten Rand des Container-Wrappers auf „Auto“ ein:

Der folgende Code:

img {  
  display: block;
  margin: 0 auto;
}

Erzielen Sie eine horizontale Zentrierung, indem Sie den Rand von festlegen das Bild automatisch auf 0.

2. text-align:center

Wir können text-align:center verwenden, um Bilder und andere Inline-Elemente horizontal zu zentrieren. Beachten Sie jedoch, dass diese Methode nur für Bilder gilt, die in einem Container platziert sind.

Der folgende Code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  text-align: center;
}

Indem Sie die Textausrichtung des Container-Wrappers auf „Mitte“ setzen, wird das eingebundene Bild horizontal zentriert.

3. Position:absolut und links:50 %

Mit diesem Attribut legen wir den Stil des Bildes auf Position:absolut und links:50 % fest, um das Bild horizontal zu zentrieren. Als nächstes müssen wir den linken Rand (margin-left) des Bildes auf die halbe Breite des Bildes selbst (Breite/2) einstellen. Diese Methode eignet sich für Situationen, in denen wir das Bild nur horizontal zentrieren müssen und es uns egal ist etwa die Höhe des Bildes.

Der folgende Code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

img {
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

Bestimmen Sie die Position des Bildes, indem Sie die Position des Bildes auf absolut, links: 50 %, und dann den linken Rand auf eine negative Zahl basierend auf der tatsächlichen Breite des Bildes festlegen Zentrieren Sie das Bild horizontal.

2. Vertikale Zentrierung

1. Linienhöhe

Wenn die Höhe des Bildes gleich der Linienhöhe des Elements ist, können wir das Bild im Container vertikal zentrieren. Diese Methode eignet sich für Situationen, in denen nur eine einzige Textzeile vorhanden ist.

Der folgende Code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
  <p>只有单行文本</p>
</div>

.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

Zentrieren Sie das Bild vertikal, indem Sie die Höhe und die Zeilenhöhe des Containers auf den gleichen Wert einstellen.

2. display:flex and align-items:center

Verwenden Sie display:flex and align-items:center, um Bilder und andere Elemente vertikal im Container zu zentrieren. Diese Methode eignet sich für Situationen, in denen sich in einem Container mehrere vertikal zentrierte Elemente (z. B. zwei Bilder) befinden.

Der folgende Code:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Indem Sie die Anzeigeeigenschaft des Containers auf Flex setzen und die Eigenschaften align-items:center und justify-content:center verwenden, wird das Bild horizontal und vertikal im Container zentriert.

3. position:absolute und top:50%

Mit den Attributen position:absolute und top:50% können wir das Bild vertikal zentrieren. Als nächstes stellen Sie margin-top auf die halbe Höhe des Bildes selbst ein.

Der folgende Code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

Durch Festlegen der Position des Bildes auf absolut wird position:relative die Höhe des Wrapper-Containers auf 200 Pixel festgelegt. Stellen Sie dann den oberen Rand des Bildes auf 50 % ein, um das Bild vertikal zu zentrieren, und stellen Sie den Rand oben auf die halbe Höhe des Bildes ein, um eine vertikale Zentrierung zu erreichen.

3. Horizontale und vertikale Zentrierung

Wenn wir das Bild horizontal und vertikal zentrieren müssen, können wir andere Kombinationen der oben genannten Methoden verwenden.

1. position:absolute, top:50% und left:50%

Diese Methode ist die am häufigsten verwendete Methode. Mit den Attributen position:absolute, top:50% und left:50% können gleichzeitig horizontale und vertikale Werte erreicht werden Zentrierung. Diese Methode funktioniert, wenn Sie ein Bild nur zentrieren müssen.

Der folgende Code:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Durch Festlegen der Position sowie der oberen und linken Eigenschaften des Bildes auf 50 % wird die horizontale und vertikale Zentrierung erreicht. Als nächstes verwenden Sie die Transformationseigenschaft, um das Bild um die halbe Breite und Höhe nach links oben zu verschieben (d. h. translator(-50 %, -50 %).

2. Verwenden Sie display:flex und justify-content und align-items

Mit den Eigenschaften display:flex, justify-content und align-items können wir mehrere Bilder gleichzeitig horizontal und vertikal zentrieren. Diese Methode eignet sich für Situationen, in denen sich mehrere Bilder in derselben Zeile befinden und gleichzeitig auf der Webseite zentriert werden müssen.

Der folgende Code:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img {
  margin: 5px;
}

Indem Sie die Anzeige des Containers auf Flex einstellen und die Eigenschaften justify-content und align-items verwenden, kann das Bild gleichzeitig horizontal und vertikal zentriert werden.

Fazit

Das Zentrieren von Bildern ist eine der Techniken, die im Webdesign häufig verwendet werden. Wenn wir mehrere Bilder haben, die auf einer Seite zentriert werden müssen, müssen wir eine geeignete Zentrierungsmethode wählen. Eine horizontale Zentrierung kann mithilfe der Eigenschaften „margin“, „text-align“ und „position“ erreicht werden, eine vertikale Zentrierung kann mithilfe der Eigenschaften „line-height“, „display“ und „position“ erreicht werden, und eine horizontale und vertikale Zentrierung kann auch mithilfe einer Kombination dieser Eigenschaften erreicht werden. Daher kann uns die Wahl der geeigneten Bildzentrierungsmethode im Webdesign dabei helfen, ein besseres Benutzererlebnis und einen besseren Designstil zu schaffen.

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie ein Bild mit CSS zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!