So zentrieren Sie Bilder horizontal und vertikal in DIV oder DIV

<div Klasse="Box">
  <img />
</div>

Gängige Methoden zum horizontalen Zentrieren:

text-align:center ——Dadurch kann die horizontale Zentrierung von Schriftarten und Bildern untergeordneter Elemente erreicht werden.

margin:0 auto - Dies ist eine horizontale Zentrierungsmethode für Blockelemente

Gängige Methoden zum vertikalen Zentrieren:

vertical-align: middle;——Diese vertikale Zentrierungseigenschaft ist nur für Inline- oder Inline-Block-Elemente gültig.

Die Verwendung der vertikalen Zentrierung von Flex wird hier nicht berücksichtigt

So zentrieren Sie ein Bild horizontal und vertikal in einem Div:

Die erste Methode: direkte manuelle Berechnung. Kenntnis der Höhe der Box und der Höhe des Bildes

.Kasten{
    Breite: 300px;
    Höhe: 300px;
    Rand: 1px durchgehend rot;
    Textausrichtung: zentriert;
}
img{
    Breite: 80px;
    Höhe: 80px;
    Polsterung oben: 110px;
}

Hinweis: Diese Methode lautet: Subtrahieren Sie die Höhe des Bildes von der Höhe der Box und dividieren Sie sie durch 2, was der Wert von padding-top ist. Natürlich können Sie auch margin-top verwenden, wodurch auch eine vertikale Zentrierung des Bildes im div erreicht werden kann. Um den Text horizontal zu zentrieren, verwenden Sie einfach text-align: center;

Die zweite Methode: Bildbreite und -höhe sind bekannt

 img{
     Position: relativ;
     oben: 50 %;
     links: 50 %;
     Rand oben: die Hälfte der negativen Bildhöhe;
     Rand links: die Hälfte der negativen Bildbreite;
   }

Die dritte Methode: Die Breite und Höhe des Bildes sind unbekannt und die Höhe der Box ist vorzugsweise fest.

img{
    Position: relativ;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %,-50 %);
}

Hinweis: Wenn es nicht fest ist und die Höhe adaptiv ist, wird sich das Bild wahrscheinlich etwas über das Div hinaus bewegen. Dies ist eine Möglichkeit, mit CSS3 eine horizontale und vertikale Zentrierung zu erreichen. Natürlich wird diese Methode nicht unterstützt, wenn sie kompatibel ist, aber transform nicht unterstützt wird.

Die vierte Methode: Behandeln Sie die Box wie eine Zelle. Sie müssen die Breite und Höhe der Box nicht festlegen und können das Bild von selbst erweitern lassen. Breite und Höhe der Box sind hierbei vorzugsweise fix. Selbstverständlich kann der Effekt auch erzielt werden, wenn er nicht fixiert ist.

.Kasten{
    Breite: 300px;
    Höhe: 300px;
    vertikale Ausrichtung: Mitte;
    Textausrichtung: zentriert;
    Anzeige: Tabellenzelle;
    Rand: 1px durchgehend rot;
}

Hinweis: „Anzeige: Tabellenzelle“ entspricht der Behandlung des Beschriftungselements als Zelle. Der einzige Nachteil ist, dass es nicht mit IE6/7 kompatibel ist.

Die fünfte Methode: Verwenden Sie eine Tabelle, um den Effekt der horizontalen und vertikalen Zentrierung zu erzielen. Die Breite und Höhe des Tisches sind bekannt

html:

 <Tabelle Klasse="img_meng_show">
   <tr>
     <td>
        <img src="">
     </td>
   </tr>
 </Tabelle>

CSS:

 .img_meng_show td{
   vertikale Ausrichtung: Mitte;
    Textausrichtung: zentriert;
 }

So zentrieren Sie ein DIV horizontal und vertikal:

Erster Weg:

HTML:

<div Klasse="Box"></div>

CSS:

  .Kasten{
    Position: absolut (oder fest);
    oben: 0;
    links: 0;
    unten: 0;
    rechts:0;
   Rand: automatisch;
    Breite: 100px;
    Höhe: 200px;
 }

Dadurch kann eine vertikale und horizontale Zentrierung des Div erreicht werden. Voraussetzung ist jedoch, dass Breite und Höhe sowie der Rand hinzugefügt werden. Wenn Sie das Bild horizontal und vertikal zentrieren möchten, können Sie wie oben gezeigt den linken Rand verwenden.

Wenn Sie es nur vertikal zentrieren möchten, verwenden Sie einfach oben und unten und Rand: auto 0;

Wenn Sie es entsprechend nur horizontal zentrieren möchten, verwenden Sie einfach oben und unten und dann Rand: 0 auto;

Diese Methode unterstützt jedoch nicht IE8 und niedriger.

Zweiter Weg:

Mit der CSS3-Translate-Methode können Sie das Div auch vertikal und horizontal zentrieren:

.Kasten{
    Position: fest (oder absolut);
    oben: 50 %;
    links: 50%;
    Breite: 100px;
    /*Höhe: 100px;*/Die Höhe kann festgelegt werden. Hintergrund: himmelblau;
    transformieren: übersetzen(-50 %,-50 %);
}

Wenn es sich um ein Div innerhalb eines Div handelt, d. h.

<div Klasse="aus">
    <div class="in"></div>
</div>

Diese Struktur kann auch erreicht werden, indem man auf die Art und Weise der horizontalen und vertikalen Zentrierung des Bildes im Div verweist. Wenn Sie das Blockelement nur horizontal zentrieren möchten, sollte text-align: center; durch margin: 0 auto; ersetzt werden.

Zusammenfassen

Oben ist die Methode zum horizontalen und vertikalen Zentrieren von DIV oder Bildern in DIV, die ich Ihnen vorgestellt habe. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!