Függőleges középre a CSS

Posted on

Yuhu Végleges Megoldás Ismeretlen Magasság

Bár van egy CSS tulajdonság függőleges igazítás, ez nem úgy működik, mint attribútum valign a HTML táblázatok. CSS tulajdonság vertical-align úgy tűnik, nem képes kizárólag megoldani ezt a problémát:

Meghatározása a probléma

Nincs általános megoldás ismert volt, míg Szeptember 2004. Én úgy találtam, hogy megy haza a Wilson utcán.

Kijelző egy példa a függőleges középre a böngészőben.


Frissítés 2015 – flex

Mint az új böngésző támogatja kijelző: flex, sokkal könnyebb függőleges középső elem CSS-sel, mint korábban.

<style>
#containter {
height: 400px;
display: flex;
/* flex-direction: column;*/
align-items: center;
/* justify-content: center;*/
}
#content {}
</style>

<div id=”containter“>
<div id=”content“>
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>

Lásd ezt például a böngésző.

Uncommenting igazolja-tartalom: center vagy flex-irányba: oszlop lehet kapni más típusú központosító (vízszintes, mind). Például indokolja-tartalom: center align-elemek: center vezet központú tartalom, mind vertikálisan, mind horizontálisan.

A legfontosabb szabály az, display: flex. Ez a viszonylag új érték kikapcsolja a kijelző a containter, hogy egy speciális üzemmód, amely lehetővé teszi a közvetlen leszármazottja használni, majd illessze be a teret, a containter (speciális tulajdonságok, mint align-items stb.). A konténer van néhány szélesség, azaz width: 400px csak az a célja, hogy ezt a példát. Nincs szükség arra, hogy a stílus, a tartalom, elem, de ez a közvetlen leszármazottja a tartály.

Támogató kijelző: flex nagyon jó, a modern böngészők. Utolsó nem-támogató böngésző az Internet Explorer 9, 10 (10-es verziója van egy speciális szintaxist a flex). Ha fontos neked, hogy optimalizálja azok számára, valamint a régebbi böngészők, akkor olvassa el a többi ezt az oldalt.

Eredeti tartalom 2004-től a frissítések:


Az ötlet

A zárókő a megoldás az Internet Explorer 6, 7, vagy hirtelen fordulattal mód: a belső objektum teljesen különbözhet a fele a terület magassága. Akkor költözött fel a felére, a magasság. A téves értelmezést, a height tulajdonság a régebbi Internet Explorer böngészőt használják, mint egy funkció (számított magassága venni, mint egy alap százalékos magassága beágyazott kategória). Egy extra beágyazott tag a <div> van szükség, azok számára, Felfedezők.

Megoldás a normál böngésző, mint a Mozilla, Opera, Safari, stb. (beleértve az IE 8, 9, 10, vagy annál fiatalabb) teljesen más. Teljes terület (top <div>) beállítása jelenik meg, mint a táblázat (display: table; része CSS2). A belső objektum értéke, mint a table-cell (display: table-cell). Most van a kulcs ötlet … lehet használni a vertical-align tulajdonság az ilyen táblázat-a megjelenített elem a szabványos böngészőkben. (Internet Exlorer 6, 7, majd hirtelen fordulattal mód figyelmen kívül hagyja azokat a tulajdonságait, vagy nem tudja, hogy az értékek.)

Aztán mind a szintaxis vagy egyesített. Én a tone it up – aláhúzás hack, de a jel #. Egy CSS tulajdonság írva a char # a start (azaz #pozíció) látható az IE 7 vagy annál idősebb. Az ilyen írásbeli ingatlan láthatatlan más szabványos böngésző (pl. Explorer 6, vagy 7 értelmezi #position: absolute; ellentétben a többi böngésző). Ezt az úgynevezett “aláhúzás hack” úgy tűnik, hogy érvényes, de ha nem akarom használni, akkor használja a strukturált alábbi kódot a második példa (sajnos nem működik IE 7). Más típusú böngésző, az Internet Explorer 8 vagy annál fiatalabb nem kell csapkodott, mint támogatják display: table-cell megfelelően.

Kompatibilitás

Az alábbi kód működik az Internet Explorer 5.0, 5.5, 6.0, 7, 8, 9 10 béta, a Gecko böngészővel (Mozilla, Firefox, Netscape 7), az Opera 7, 8, minden Chrome, Konqueror 3.3.1. (lehet, hogy kisebb is), valamint a Safari (Win, iOS). Az oldal HTML, HTML5 vagy XHTML, szabvány, vagy hirtelen fordulattal mód.

A példa nem működik az IE 7 normál mód (frissítés 2012-ben: mintegy 3 % – a kliens). Ha bármilyen egyszerű megoldás az IE 7, kérem tudassa velem.


Érthető kód:

<!DOCTYPE HTML>
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>

<body>
<div class=”greenBorder” style=”display: table; height: 400px; #position: relative; overflow: hidden;“>
<div style=” #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;“>
<div class=”greenBorder” style=” #position: relative; #top: -50%“>
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

Lásd ezt például a böngésző

Legenda a színek:

CSS stílusok minden böngésző
CSS stílusok standard böngészők
CSS stílus csak az Internet Explorer 6, 7, majd hirtelen fordulattal (# hack)


A végeredmény:

Universal vertical center with CSS

Lásd ezt például a böngésző


Legyen strukturális nélkül hack

(MEGJEGYZÉS: ez érvényes megoldás alábbiakban leírt nem működik az Internet Explorer 7 (standard mód), mert IE7 nem érti táblázat – értékek a kijelzőn ingatlan. A középen tárgy túl magas. DE: IE 7 által használt csak mintegy 3 % – a felhasználók (2012), valamint a szám csökken. Ha még elme IE7 felhasználó, kérjük, használja a nem érvényes megoldás a fenti írni szokás mód, vagy használja a html feltételes megjegyzések elválasztja a tulajdonságok az IE 7 valahogy.)

Az első példa a fenti nem szép, de remélem megértetted. Lehetséges, hogy a kódot írni másképp. Például így:

<div id=”outer“>
<div id=”middle“>
<div id=”inner“>
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>

A strukturált érvényes stílus:

<style type=”text/css”>
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;}

#inner {position: relative; top: -50%} /* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
</style>

Lásd az érvényes például a böngésző (úgy néz ki, ugyanúgy, mint az előzőt).

Szín legenda:

CSS stílus az Internet Explorer 6 (vagy hirtelen fordulattal)
CSS stílusok standard böngészők

CSS2 selector #value[id] egyenértékű selector #érték, de az Internet Explorer 6 figyelmen kívül hagyja az ilyen típusú választók [id]. Általában: szintaxis *[foo] azt jelenti, hogy bármely elem attribútum foo. Bármilyen HTML elem #valamit kell az id attribútum definíció szerint állítsa be, hogy “valami”. Ez a trükk — #value[id] működik a standard böngésző (hasonlóképpen működik .value[osztály])

Van CSS tulajdonság beállított pozíció, hogy abszolút vagy relatív, az Internet Explorer. A kód pozíció: statikus kap vissza az alapértelmezett érték a szabványos böngészőkben (ingatlan felső nem működik, akkor).


Mind függőleges, mind vízszintes központosító

Az alapvető kód ugyanaz lesz, csak kell hozzá egy kis extra CSS szabályokat. Ha az oldal standard üzemmódban, adja meg ezt a kódot:

<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
</style>

Mint azt bizonyára látod, ez a leggyakoribb vízszintes központosító módszer – auto, bal, jobb margó. Mert különbözetet kell a hely a Firefox, az Opera, be kell állítania egy szélessége a #outer div. Ha 100%, hogy nem illik az ön igényeinek, használjon semmilyen más értéket.

Az a fontos, hogy néhány megfelelő szélességet #inner. Ez a bemutató függőleges középre egy objektum ismeretlen magasság. Feltételezem, hogy tudod, a szélessége a tárgy (a legtöbb esetben egyszerűen eldöntheti, hogy milyen széles legyen). Használhatja a pixel értékek, vagy a százalékos szélesség. Ha a középre tárgy csak egy ismeretlen méretű kép, nem kell, hogy állítsa be a szélesség.

Ha használja a hirtelen fordulat mód oldal renderelés (mód attól függ !Doctype, mint tudjuk), hozzáadott kódot kell egy kicsit, mert hirtelen fordulattal mód Exploder nem értem, auto margók, de van egy szép bogarat a text-align értelmezés helyett. Ezt a kódot kell dolgozni mind a szabványos, mind szokás mód:

<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;}
</style>

Kérjük, vegye figyelembe, hogy ez csak egy része kódot, amelyet meg kell adni, hogy az előző példában. Ha lusta vagy, hogy összekapcsolják a kódok, kérjük, olvassa el a teljes például a böngésző: függőleges, vízszintes középre. Tudod, lusta vagyok.


Hogyan center függőlegesen, az ablak magassága

Ugyanúgy, csak adja hozzá a stílust:

<style>
body, html {height: 100%;}
#outer {height: 100%; overflow: visible;} /* or without overflow */

</style>

Úgy tűnik, hogy a #outer nyilatkozat elegendő lesz, de nem. Test html nyilatkozat meghatározza 100% – a az ablak magassága, mint a bázis a következő százalékos. Most jobb, ha nem meghatározott overflow: hidden (mint a fenti példák), mert ha a tartalom nem lenne magasabb, mint az ablakon, akkor lehetetlen lenne, hogy lapozzunk.


Kapcsolódó

Megpróbálja center függőlegesen:

Példák:


Szerző: Dušan Janovský

Eredetileg egy https://www.jakpsatweb.cz/css/css-vertical-center-solution.html. Készítette http://hunsci.com