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

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>

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7677

15

CakePHP-Tutorial

1393

52

C#-Tutorial

1207

24

Wie lautet das Format des Kontonamens von Steam?

91

11

Win11 -Aktivierungsschlüssel dauerhaft

73

19

Mehr anzeigen