Vertikalios Centravimo CSS

Tikslesniems sprendimams Yuhu su nenurodyta ūgis.

Nors yra CSS nuosavybė vertikalus lygiavimas, jis neveikia kaip atributas valign HTML lentelėse. CSS nuosavybė vertikalus lygiavimas neatrodo, kad būtų galima tik išspręsti šią problemą:

Apibrėžimas problemos

  • yra sritis (pvz <div>) su žinomu aukštis puslapyje
  • vidinis objektas (paprastai ilgai tekstas <div>) yra viduje srityje ir aš nežinau jo aukštį (pvz, nes jo turinys yra dinamiškai generuojami iš duomenų bazės)
  • noriu iki centro objektą vertikaliai rajone
  • nenaudojant HTML lenteles.

Nėra generalinio sprendimas buvo žinoma iki 2004 m rugsėjo Aš rasiu tai vyksta namo Wilson gatvėje.

Rodyti žinutę vertikalios centravimo naršyklėje pavyzdys.

Atnaujinti 2015 – flex

Kaip naujas naršyklės palaiko ekranas: flex, tai yra daug lengviau vertikalios centre elementas su CSS, nei anksčiau.

<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>

Žiūrėti šį pavyzdį naršyklėje.
Uncommenting pateisinti turinio: Centras ar flex-kryptį: stulpelis galite gauti kitų rūšių centravimo (horizontalios, tiek). Pavyzdžiui pateisinti turinio: centras su ALIGN pozicija: centras sukelia centre turinį tiek vertikaliai, tiek horizontaliai.

Svarbiausia taisyklė yra ekranas: flex. Tai gana nauja vertė perjungia iš bako į specialiu režimu ekranas, leidžiantis jo tiesioginis palikuonis naudoti ir suderinti visose konteinerio erdvę (naudojant specialias savybes, kaip align-objektų ir kitiems). Konteineris sukūrė tikrą plotį, t.y. plotis: 400px tik tikslu šiame pavyzdyje. Nereikia stiliaus turinio elementas, bet ji turi būti tiesioginis palikuonis konteinerio.

Pagalba display: flex yra labai geras šiuolaikinių naršyklių. Paskutinis nėra palaikančių naršyklių yra 9 ir 10 “Internet Explorer” (10 versija turi ypatingą sintaksė flex). Jei tai jums svarbu optimizuoti šių ir senesnės naršyklės, kurią jūs turėtumete perskaityti šio puslapio poilsio.

Originalus turinys iš 2004 atnaujinimus:

Idėja

Iš Internet Explorer 6, 7 arba užsukimas režimu tirpalu kertinis akmuo yra tokia: vidaus objektas yra visiškai pastatytas pusėje vietovės aukščio. Tada yra perkeltas pusė jos aukščio. Neteisingas interpretacija aukščio turto senesnės Internet Explorer naudojamas kaip funkcija čia (skaičiuojami aukštis imamas kaip procentinio aukščio lizdinė žymeles bazę). Viena papildoma įdėtos žymė <div> reikia tiems Explorers.

Sprendimas standartinių naršyklių, tokių kaip Mozilla , Opera , Safari ir tt (įskaitant IE 8, 9, 10 ir jaunesni) yra visiškai kitokia. Visa teritorija (viršuje <div>) yra nustatyta, kad rodomas kaip stalo (ekranas: Stalas; dalis CSS2). Vidaus objektas yra nustatytas kaip stalo ląstelių (display: stalo ląstelės). Dabar — yra raktas idėja — tai galima naudoti vertikaliai-align turtą tokio stalo-rodomas elementas standartinių naršyklių. ( “Internet Explorer 6, 7 ir užsukimas režimas ignoruoja tas savybes ar nežino savo vertybes.)

Tada abu sintaksė yra sujungtos. Aš naudoju Pixies pabrėžti Hack, bet su gestų #. CSS nuosavybė parašyta su char # dėl pradžioje (pvz #position) yra matomas IE 7 metų ir vyresni. Toks rašytinis nuosavybė yra nematoma dėl bet kurios kitos standartinę naršyklę (pvz Explorer 6 ar 7 interpretuoja #position: absoliuti; Skirtingai nuo kitų naršyklių). Tai vadinamasis “pabrėžti hack”, atrodo, galioja, bet jei nenorite, kad jį naudoti, galite naudoti labiau struktūrizuotą kodą žemiau mano antrame pavyzdyje (deja, neveikia IE 7). Kiti tipai naršyklių ir Internet Explorer 8 ir jaunosios nereikia būti nulaužė, nes jie paremti kalbomis: tinkamai stalo langelį.

Suderinamumas

Toliau pateiktoje kodas veikia Internet Explorer 5.0, 5.5, 6.0, 7, 8, 9 ir 10 beta, į Gecko naršyklių (Mozilla, Firefox, Netscape 7), Opera 7, 8 ir daugiau, kiekvienas Chrome”, Konqueror 3.3.1. (gal mažesnės taip pat), o Safari (Win, iOS). Puslapis gali būti HTML HTML5 arba XHTML standartas ar užsukimas režimas.

Galiojanti pavyzdys neveikia IE 7 standartiniu režimu (atnaujinta 2012: apie 3% pacientų). Jei pastebėsite kokių nors lengvai apeiti IE 7, prašome let me know.

Suprantama kodas:

<!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>

Žiūrėti šį pavyzdį naršyklėje

Legenda spalvų:

CSS stiliai kiekvienam naršyklėje
CSS stiliai standartinių naršyklių
CSS stiliaus tik Internet Explorer 6, 7 ir užsukimas (su # hack)

Rezultatas atrodo:

Žiūrėti šį pavyzdį naršyklėje

Padarykime tai struktūrinis ir be hacks

(PASTABA: tai aprašyta žemiau tinkamas sprendimas neveikia Internet Explorer 7 (standartinis režimas), nes IE7 nesupranta table- vertybes ekrano nuosavo turto orientuota objektas yra per didelis, BET: IE 7 naudoja tik apie 3 % vartotojų (2012) ir skaičius mažės. Jei vis dar proto IE7 vartotojus, prašome naudoti ne galiojantį sprendimą pirmiau, rašyti užsukimas režimu, ar naudoti HTML sąlyginių komentarų atskirti IE 7 kažkaip savybes.)

Pirmasis pavyzdys aukščiau nėra gražus, bet aš tikiuosi, kad jūs turite suprasti, kad. Tai galima rašyti kodą skirtingai. Pavyzdžiui šiuo būdu:

<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>

And the structured valid style:

<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>

Žr galiojantį pavyzdį naršyklę (atrodo taip pat kaip ir paskutinis).

Spalva legenda:

CSS stiliaus Internet Explorer 6 tik (ar užsukimas)
CSS stiliai standartinių naršyklių

CSS2 selektorių #value [id] yra lygus selektoriaus #value, bet Internet Explorer 6 ignoruoja šiuos selektoriai tipų su [id]. Paprastai: sintaksė *[foo] reiškia bet kokį elementą su atributas foo. Bet elementas HTML #something turi turėti atributą id pagal nustatytas “kažkas” apibrėžimą. Štai triukas – #value[id] veikia standartinių naršyklių tik (panašiai veikia .value[class])

Yra nustatytas absoliutus arba santykinis Internet Explorer CSS nuosavybė pozicija. Kodas position: static gauna ją atgal į numatytąją vertę standartinių naršyklių (turto viršų neveikia tada).

Tiek vertikaliai, tiek horizontaliai centravimo

Pagrindinė kodas bus tas pats, jums tiesiog reikia pridėti keletą papildomų CSS taisykles. Jei jūsų puslapis standartiniu režimu, pridėti šį kodą:

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

Kaip jūs turbūt matote, tai yra labiausiai paplitusi horizontalus centravimo metodas – Auto kairę ir į dešinę marža. Nes maržos reikalinga Firefox ir Opera vietos, jūs turite nustatyti plotį į #outer div. Jei 100% netelpa savo poreikius, naudoti bet kokį kitą vertę.

Svarbiausia yra nustatyti tam tinkamą plotį #inner. Šis vadovėlis yra apie vertikalią centravimo objekto nežinomo aukščio. Manau, kad jūs žinote, objekto plotis (daugeliu atvejų jums paprasčiausiai nuspręsti, kaip plačiai ji turėtų būti). Galite naudoti pikselių reikšmes ar procentinę plotį. Jei centre objektas yra tik nežinomas dydžiu, jums nereikia nustatyti plotį.

Jei naudojate užsukimas režimas Page rendering (režimas priklauso nuo !Doctype kaip žinote), pridūrė kodas turėtų būti šiek tiek ilgiau, nes užsukimas režimas Exploder nesupranta auto paraštes, tačiau turi vieną gražią klaidą text-align aiškinimo, o ne. Šis kodas turi dirbti tiek standartinio ir užsukimas režimu:

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

Prašome atkreipti dėmesį, kad tai yra tik dalis kodo, kurį turi įtraukti į ankstesniame pavyzdyje. Jei esate tingus derinti kodus, prašome pamatyti pilną pavyzdį naršyklė: vertikali ir horizontali centravimo. Žinai, aš tingiu per daug.

Kaip iki centro vertikaliai ant langų aukščio

Tas pats būdas, ir tik pridėti stilių:

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

</style>

Atrodo, kad #outer deklaracija turėtų pakakti, tačiau taip nėra. Kūno ir html deklaracija nustato 100% lango aukščio kaip kitą procentą bazę. Dabar tai yra geriau ne nustatyti perpildymo: paslėpta (kaip parodyta pavyzdyje aukščiau), nes kai turinys būtų aukštesni nei lango, tada jis būtų neįmanoma slinkite.

Iš pradžių ne http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.

Most popular articles:


  • Photo-news blog

  • Clipart Library

  • Keywords base