Heim > Artikel > Web-Frontend > CSS löst vertikale Zentrierung unbekannter Höhe_CSS/HTML

CSS löst vertikale Zentrierung unbekannter Höhe_CSS/HTML

WBOYOriginal: 2016-05-16 12:12:031198Durchsuche

Obwohl es eine CSS-Funktion zur vertikalen Ausrichtung gibt, kann sie das Problem der vertikalen Zentrierung unbekannter Höhe (wenn ein DIV-Tag Text oder Bild unbekannter Höhe enthält) nicht effektiv lösen.

Für Standardbrowser wie Mozilla, Opera, Safari usw. können Sie den Anzeigemodus des übergeordneten Elements auf TABLE (Anzeige: Tabelle;) und der internen untergeordneten Elemente auf Tabellenzelle (Anzeige: table-cell ), die die Vertical-Align-Funktion verwendet, um sie vertikal zu zentrieren, aber nicht standardmäßige Browser unterstützen sie nicht.

Nicht standardmäßige Browser können das untergeordnete Element nur so einstellen, dass es 50 % von oben entfernt ist, und dann ein Element darin hinzufügen, um es um -50 % von oben zu versetzen.

Code kopieren Der Code lautet wie folgt:

body {padding: 0; margin: 0 ;} 
body,html{height: 100%;} 
#outer {height: 100%; overflow: versteckt; position: relative;width: 100%; back id] { display: table; position: static;} 
#middle {position: absolute; top: 50%;} /* nur für Explorer*/ 
#middle[id] {display: table-cell; Vertical-Align: Mitte; Position: statisch;} 
#inner {position: relative; top: -50%;width: 0 auto;} /* nur für Explorer */ 
div.greenBorder {border: 1px solid green; background-color: ivory;}

 

xhtml

Code kopieren Der Code lautet wie folgt:

 id="inner" class "greenBorder"> CSS2-Selektor #value[id] wird vom IE nicht unterstützt. 

CSS2-Selektor #value[id] entspricht Selektor #value, aber Internet Explorer unterstützt diesen Selektortyp nicht. Ebenso entspricht .value[class] .value, das nur von Standardbrowsern gelesen werden kann. 

Test: Firefox1.5, Opera9.0, IE6.0, IE5.0 bestanden. 







Vertikale Zentrierung in gültigem CSS




  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title></title>Standardlänge<style type="text/css"> 
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;} 
body,html{height: 100%; } 
a{color: #333;} 
a:hover{color: green;} 
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; } 
#outer[id] {display: table; position: static;} 
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/ 
#middle[id] {display: table-cell; vertical-align: middle; position: static;} 
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */ 
div.greenBorder {border: 1px solid green; background-color: #FFF;} 
p{margin: 1em;} 
    </style> Längere Seite<div id="outer">
      <div id="middle"> 1. Öffnen Sie Illustrator, erstellen Sie eine neue Datei, zeichnen Sie ein Rechteck, das größer als das Bild ist, das Sie importieren möchten, und füllen Sie es mit Weiß. 
 
        2. Wählen Sie das Rechteck aus, Menü: Effekt > Verzerren & Transformieren > Zickzack, stellen Sie es wie unten gezeigt ein. 
 
        3. Menü: Effekt > Stilisieren > Schlagschatten, wie unten gezeigt einstellen. 
 
        1. Öffnen Sie Illustrator, erstellen Sie eine neue Datei, zeichnen Sie ein Rechteck, das größer als das Bild ist, das Sie importieren möchten, und füllen Sie es mit Weiß. 
 
        2. Wählen Sie das Rechteck aus, Menü: Effekt > Verzerren & Transformieren > Zickzack, stellen Sie es wie unten gezeigt ein. 
 
        3. Menü: Effekt > Stilisieren > Schlagschatten, wie unten gezeigt einstellen. <div id="inner" class="greenBorder">
      <p>
      Entworfen von <a href="javascript:toggleContent('inner',1)">Forestgan</a> Diese Demo ist unter der <a href="javascript:toggleContent('inner',2)">Creative Commons-Lizenz</a> lizenziert – Namensnennung und nichtkommerzielle Nutzung. 
      </p>
    <p>
  </p>
<address style="text-align:center; padding: .5em; clear: left;">


<br><input onclick="runEx('runcode63300')" type="button" value="运行代码"> <input onclick="doCopy('runcode63300')" type="button" value="复制代码"> <input onclick="doSave(runcode63300)" type="button" value="保存代码">[Ctrl+A untuk memilih semua Nota: <a href="/article/23421.htm" title="查看具体详情" target="_blank">Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan </a>]</address>
</div>
<br>
</div>
</div>
Stellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Probleme mit dem Layout. Sehr gute Insights_CSS/HTMLNächster Artikel：Probleme mit dem Layout. Sehr gute Insights_CSS/HTML

In Verbindung stehende Artikel

Mehr sehen