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

So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

Detaillierte Erläuterung zum automatischen Aktualisieren der Seite und zur Aktualisierungsmethode nach dem Löschen von Vue-Listendaten

Artikel

Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung

Implementierung der vertikalen Zentrierung mit unbekannter Höhe in CSS

So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

JavaScript-Funktion Currying

Erläuterung des Beispiels einer MySQL-Datenanalyse-Speicher-Engine

MySQL 8.0.13 Download- und Installations-Tutorial mit Bildern und Text

Detaillierte Erläuterung zum automatischen Aktualisieren der Seite und zur Aktualisierungsmethode nach dem Löschen von Vue-Listendaten

Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung

Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code

Verwendung und Beispiele für Linux-Befehle zur Echotextverarbeitung

Lernen Sie die Grundlagen der JavaScript-DOM-Operationen in einem Artikel

So ändern Sie den Benutzer und die Gruppe einer Datei in Linux

Artikel empfehlen

Super ausführliches Tutorial zur Implementierung der TabBar untere Navigationsleiste in Vue

Codebeispiel zum Erreichen des internen Ankerpunkts einer Webseite durch reines CSS beim Auf- und Ab-Offset

MySQL 5.7.18 Installations- und Konfigurations-Tutorial unter Windows

Detaillierte Analyse des Linux-NFS-Mechanismus anhand von Fällen

Vue echarts realisiert horizontales Balkendiagramm

Lokale MySQL-Installation und Problemlösung

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

Detaillierte Erklärung, wie Sie das automatische Beenden des Docker-Containers verhindern können

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

XHTML-Einführungstutorial: Textformatierung und Sonderzeichen

Detaillierte Erläuterung der Linux-Dateiberechtigungen und Befehle zur Gruppenänderung

Einführung von ECharts in das Vue-Projekt

Detaillierte Erklärung der HTML-Dokumenttypen

Detaillierte Erklärung der MySQL-Syntax, Sonderzeichen und regulären Ausdrücke

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 und Workbench