Implementierung der vertikalen Zentrierung mit unbekannter Höhe in CSS

Dieser Artikel stellt hauptsächlich die Implementierung der vertikalen Zentrierung unbekannter Höhe in CSS vor und teilt sie mit Ihnen. Die Details sind wie folgt:

<!doctype html>
<html lang="de">  
  <Kopf>  
    <meta charset="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-kompatibel"/>  
    <title>CSS vertikal zentriert</title>  
    <style type="text/css">  
      .Container{  
        Breite: 500px;/*Dekoration*/
        Höhe: 500px;  
        Hintergrund: #B9D6FF;  
        Rand: 1px durchgezogen #CCC;  
      }  
       
    </Stil>  
  </Kopf>  
  <Text>  
    <h1>Vertikal zentriert (Tabelle)</h1>  
    <div Klasse='Container'>
        <Tabelle Breite="100%" Höhe="100%">
            <tr>
               <td align="zentriert" valign="mitte">
                  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
               </td>
           </tr>
       </Tabelle> 
   </div>
     
  </body>  
</html>

Okay, schauen wir uns die CSS-Implementierung an. CSS kann alles, was Tabellen können. Allerdings unterscheidet sich CSS erheblich von Browser zu Browser, sodass die Kompatibilität sehr schwierig ist. Dabei geht es um viele Details, verschiedene Abläufe, Anzeigeeffekte und CSS-Hacks. Der IE hat in den Anfangsjahren viele private Attribute entwickelt, die wir weiter erforschen müssen. Schauen wir uns zunächst die einfachste Implementierung an, die Hintergrundbildmethode

Hintergrundbildmethode

<!doctype html>
<html>
<Kopf>
<title>CSS vertikal zentriert</title>
<style type="text/css">
.container {
  Breite: 500px;
  Höhe: 500px;
  Zeilenhöhe: 500px;
  Hintergrund: #B9D6FF URL (http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) keine Wiederholung Mitte Mitte;
  Rand: 1px durchgezogen #f00;
  Textausrichtung: zentriert;
}
 
</Stil>
 
</Kopf>
<Text>
<h1>Vertikal zentriert</h1>
<div Klasse="Container">
    
</div>
</body>
</html>

CSS-Ausdrucksmethode

<html lang="de">  
  <Kopf>  
    <meta charset="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-kompatibel"/>  
    <title>Situ Zhengmei CSS vertikale Zentrierung</title>  
    <style type="text/css">  
      .Container{  
        /*IE8 richtet sich vertikal an Standardbrowsern aus*/
        Anzeige: Tabellenzelle;
        vertikale Ausrichtung: Mitte; 
        Breite: 500px;/*Dekoration*/
        Höhe: 500px;  
        Hintergrund: #B9D6FF;  
        Rand: 1px durchgezogen #CCC;  
      }  
      .container img{  
        display:block;/*Lass es ein Boxmodell haben*/
        Rand: 0 automatisch;  
        Textausrichtung: zentriert;
        margin-top:expression((500 - this.height )/2);/*Erlaube IE567 vertikale Ausrichtung*/
      }  
    </Stil>  
  </Kopf>  
  <Text>  
    <h1>Vertikal zentriert (CSS-Ausdruck)</h1>  
    <div Klasse="Container">  
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />  
    </div>  
  </body>  
</html>

Absolute Positionierungsmethode

<!doctype html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-kompatibel"/>
    <title>Situ Zhengmei CSS vertikale Zentrierung</title>
    <style type="text/css">
      div {
       /*IE8 richtet sich vertikal an Standardbrowsern aus*/
        Anzeige: Tabellenzelle;
        vertikale Ausrichtung: Mitte;
        Überlauf: versteckt;
        Position: relativ;
        Textausrichtung: zentriert;
        Breite: 500px;/*Dekoration*/
        Höhe: 500px;
        Rand: 1px durchgezogen #ccc;
        Hintergrund: #B9D6FF;
      }
      div p {
        +position:absolut;
        oben: 50 %
      }
      img {
        +Position:relativ;
        oben: -50%;
        links: -50%;
      }
  
    </Stil>
  </Kopf>
  <Text>
    <h1>Vertikale Mitte (absolute Positionierung)</h1>
    <div Klasse="Container">
      <p>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      </p>
    </div>
  </body>
</html>

Anzeige: Inline-Block-Methode

<!doctype html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-kompatibel"/>
    <title>Situ Zhengmei CSS vertikale Zentrierung</title>
    <style type="text/css">
      div {
        Anzeige: Tabellenzelle;
        vertikale Ausrichtung: Mitte;
        Textausrichtung: zentriert;
        Breite: 500px;
        Höhe: 500px;
        Hintergrund: #B9D6FF;
        Rand: 1px durchgezogen #CCC;
      }
 
    </Stil>
    <!--[wenn IE]>
<style type="text/css">
ich {
    Anzeige: Inline-Block;
    Höhe: 100 %;
    vertikale Ausrichtung: Mitte
    }
img {
    vertikale Ausrichtung: Mitte
    }
</Stil>
<![endif]-->
    
  </Kopf>
  <Text>
    <h1>Vertikale Zentrierung (Inline-Block-Methode)</h1>
    <div Klasse="Container">
      <i></i>
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
    </div>
  </body>
</html>

Schreibmodus

<!doctype html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-kompatibel"/>
    <title>CSS vertikal zentriert</title>
    <style type="text/css">
      div{
        Breite: 500px;
        Höhe: 500px;
        Zeilenhöhe: 500px;
        Textausrichtung: zentriert;
        Hintergrund: #B9D6FF;
        Rand: 1px durchgezogen #f00;
      }
      div Spanne {
        Höhe: 100 %\9;
        Schreibmodus:tb-rl\9;
      }
      div img{
        vertikale Ausrichtung: Mitte
      }
    </Stil>
  </Kopf>
  <Text>
    <h1>Vertikale Zentrierung (Schreibmodus-Methode)</h1>
    <div Klasse="Container">
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      </span>
    </div>
  </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: MySQL 5.7-Clusterkonfigurationsschritte

>>: So konfigurieren Sie Eureka im Docker

Detaillierte Erklärung der vertikalen und horizontalen Ausrichtung des Bootstrap-Rasters

Implementierung der vertikalen Zentrierung mit unbekannter Höhe in CSS

Detaillierte Erklärung der vertikalen und horizontalen Ausrichtung des Bootstrap-Rasters

Beispiel für die Verwendung von Javascript zum Ziehen und Tauschen von Div-Positionen

Lösen Sie das Problem des unzureichenden Docker-Festplattenspeichers

Schritte für Docker zum Erstellen eines eigenen lokalen Image-Repositorys

Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server

Mac OS10.14 perfekt unter der virtuellen Maschine Win10 VM installieren (grafisches Tutorial)

Vue3 implementiert ein Beispiel für eine Nachrichtenkomponente

Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte

Lösung für die verstümmelte Anzeige von Linux SecureCRT

Fünf Lösungen für Cross-Browser-Probleme (Zusammenfassung)

Artikel empfehlen

Fragen zum Vorstellungsgespräch zu JS 9 Promise

RHCE installiert Apache und greift mit einem Browser auf IP zu

Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial

So zeigen Sie Dateien im Docker-Image an

So verwenden Sie CSS, um eine Box horizontal und vertikal zu zentrieren (8 Methoden)

Nicht standardmäßiger Implementierungscode für die MySQL UPDATE-Anweisung

Verwenden Sie einfaches jQuery + CSS, um einen benutzerdefinierten Tooltip für Tag-Titel zu erstellen

JavaScript Snake-Implementierungscode

Mybatis + mysql verwendet gespeicherte Prozeduren, um Implementierungscode für Seriennummern zu generieren

So verwenden Sie den CocosCreator-Objektpool

Einfache Implementierung von Vue Drag & Drop

Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung

So rufen Sie einen Hyperlink auf und öffnen ihn

Detaillierte Erläuterung des CocosCreator-Nachrichtenverteilungsmechanismus

Lösung zum Vergessen des Administratorkennworts der MySQL-Datenbank