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 entwickeln Sie Uniapp mit vscode

Da ich immer vscode zur Entwicklung von Front-End...

Beispiel für die Implementierung einer To-Do-Anwendung mit Vue

Hintergrund Zunächst möchte ich sagen, dass ich k...

Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

WeChat-Applet: Einfacher Rechner. Zu Ihrer Inform...

Der IE8-Browser wird vollständig mit Webseitenstandards kompatibel sein

<br />Um zu beweisen, dass sein Engagement f...

Eine kurze Diskussion über benutzerdefinierte VUE-Uni-App-Komponenten

1. Übergeordnete Komponenten können Daten über Re...

Detaillierte Erklärung des Parameters slave_exec_mode in MySQL

Heute habe ich zufällig den Parameter slave_exec_...

react-beautiful-dnd implementiert die Drag-and-Drop-Funktion für Komponenten

Inhaltsverzeichnis 1. Installation 2.API 3. reagi...

15 wichtige Variablen, die Sie zur MySQL-Leistungsoptimierung kennen müssen (Zusammenfassung)

Vorwort: MYSQL dürfte die beliebteste WEB-Backend...

Verwenden Sie reines CSS, um einen pulsierenden Loader-Effekt-Quellcode zu erstellen

Effektvorschau Klicken Sie rechts auf die Schaltf...

SVN-Installation und grundlegende Bedienung (grafisches Tutorial)

Inhaltsverzeichnis 1. Was ist SVN? 2. Methoden zu...

Mysql NULL verursachte die Grube

Verwenden von NULL in Vergleichsoperatoren mysql&...

Lösung für ungültige obere Ränder von Elementen in Div-Tags

Genau wie der Titel sagt. Die Frage ist sehr merkw...

Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.

In diesem Artikelbeispiel wird der spezifische Co...

Hilfedokument „MySQL-Lernhinweise“

Systemhilfe anzeigen help contents mysql> Hilf...

Ein unverzichtbarer Karriereplan für Webdesigner

Originalartikel, bei Nachdruck bitte Autor und Qu...