So verwenden Sie CSS, um mehrere Bilder horizontal in der Mitte anzuzeigen

Lassen Sie mich zunächst über die Implementierungsschritte sprechen:

Endergebnis

2. Code-Implementierung

HTML-Teil

   <div Klasse="Haupt">
  <div Klasse="Tag">
   Kategorie-Tipps</div>
  <div Klasse="Bilder" >
   <div Klasse="Mitte">
    <img src="images/06.jpg" />
   </div>
   <div Klasse="Mitte">
    <img src="bilder/05.jpg" />
   </div>
   <div Klasse="Mitte">
    <img src="bilder/07.jpg" />
   </div>
   <div Klasse="Mitte">
    <img src="images/11.jpg" />
   </div>
   <div Klasse="Mitte">
    <img src="bilder/14.jpg" />
   </div>
  </div>
  <div Stil="clear:both;"></div>
  <div Stil="margin-bottom:30px;">
  </div>

CSS-Teil

 .hauptsächlich{
  Breite: 100 %;
  Rand oben: 40px;
 }
 .main .tag{
  Rand: 0 automatisch;
  Breite: 200px;
  Schriftgröße: 18px;
  Rahmen unten: 1px durchgezogen #878787;
  Textausrichtung: zentriert;
  Rand unten: 20px;
 }
 .main .images{ 
        Rand: 0 automatisch;
  width:1300px; //Größe des <div>-Blocks festlegen. Um den Zentriereffekt zu erzielen, ist eine Berechnung erforderlich.}
 .main .bilder .mid{
     float: left; //Linken Ausrichtungsrand festlegen: 5px; //Bildrandabstand}  
 .main .images .mid img{
     width:250px;//Standardbildlänge und -breite height:300px;
 }

Um mehrere Bilder im Div-Block in der Mitte anzuzeigen, sind Berechnungen erforderlich. Ich habe insgesamt 5 Bilder verwendet, jedes mit einer Breite von 250px und einer Höhe von 300px, außerdem beträgt der Randabstand jedes Bildes 5px, also

Die Breite des Div-Blocks sollte 5 mal 250 (px: die Breite der fünf Bilder) plus 10 mal 5 (px: die vier Intervalle multipliziert mit zwei und die erste und letzte Kante, insgesamt zehn Kanten) betragen, das Ergebnis ist 1300px

Idee: Der große Div-Block enthält kleine Div-Blöcke, und die kleinen Div-Blöcke dienen zum Aufbewahren von Bildern. Die Breite des großen Div-Blocks wird entsprechend der Größe der Bilder berechnet, sodass in der Mitte mehrere Bilder angezeigt werden können.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS zum horizontalen Zentrieren mehrerer Bilder. Weitere Informationen zum horizontalen Zentrieren von Bildern mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!