Implementierung der vertikalen Zentrierung mit unbekannter Höhe in CSS

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

Artikel empfehlen

So konfigurieren Sie Openbox für den Linux-Desktop (empfohlen)

Dieser Artikel ist Teil einer Sonderserie zu den ...

HTML erstellt eine einfache und schöne Anmeldeseite

Schauen wir uns das zunächst einmal an. HTML Quel...

Verwenden Sie CSS, um 3D-konvexe und konkave Effekte auf Bildern zu erzielen (konvex aus dem Rahmen heraus oder konkav im Rahmen).

Ⅰ. Problembeschreibung: Verwenden Sie CSS, um kon...

Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe

Gleichhohes Layout Bezieht sich auf das Layout vo...

Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist

Holen Sie sich das IP-Tool importiere lombok.exte...

So legen Sie MySQL-Berechtigungen mit phpmyadmin fest

Inhaltsverzeichnis Schritt 1: Melden Sie sich als...

Die HTML-Eingabedateisteuerung begrenzt den Typ der hochgeladenen Dateien

Fügen Sie der Webseite ein HTML-Steuerelement für...

MySQL-Optimierungstipps: Analyse der Implementierungsmethoden zur Duplikatsentfernung [Millionen von Daten]

Dieser Artikel veranschaulicht anhand eines Beisp...

Eine kurze Analyse von Kubernetes-Controllern und -Labels

Inhaltsverzeichnis 01 Gemeinsame Controller in k8...

Tutorial zu HTML-Formular-Tags (3): Eingabe-Tag

Tutorial zu HTML-Formular-Tags. In diesem Abschni...

So verwenden Sie den Linux-Befehl nl

1. Befehlseinführung nl (Anzahl der Zeilen) fügt ...

Vue implementiert eine einfache Notizblockfunktion

In diesem Artikelbeispiel wird der spezifische Co...

mysql löst das Problem, Datensätze zu finden, bei denen zwei oder mehr Felder NULL sind

Kerncode /*-------------------------------- Suche...

Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus

Inhaltsverzeichnis Kurzbeschreibung: 1. Vier Merk...

Linux entfernt node.js vollständig und installiert es über den Befehl yum neu

erster Schritt Einmaliges Löschen mit der integri...