Vertikalios Centravimo CSS

Skelbimas Dušan Janovský https://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Nors ten yra CSS turto vertikali suderinti, jis neveikia kaip atributas valign HTML lenteles. CSS turto vertikali suderinti, rodos, galėtų vien tik išspręsti šią problemą:

Problemos apibūdinimas

  • yra sritis (pvz., <div>) su žinomais aukštį puslapis
  • vidaus objektas (paprastai ilgas tekstas <div>) srities viduje, ir aš nežinau, savo aukščio (pvz., dėl to, jo turinys yra dinamiškai generuojami iš duomenų bazė)
  • noriu centras objektas vertikaliai rajone
  • nenaudojant HTML lenteles.

Nėra bendros sprendimas buvo žinoma iki Rugsėjis 2004. rugsėjo mėn.

Aš rasiu tai, grįžtant namo, ant Wilson street.

Ekranas pavyzdys vertikalus centravimo savo naršyklėje.


Atnaujinti 2015 – flex

Kaip naujas naršyklės palaiko ekranas: flex, tai yra daug lengviau vertikalus centras elementą 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>

Pamatyti tai, naršyklės.

Uncommenting pateisinti-turinys: centro arba flex-kryptimi: skiltyje jūs galite gauti kitų rūšių centravimo (horizontalios, tiek). Pavyzdžiui pateisinti-turinys: centras, kuriame suderinti objektų: centre veda centre turinio, tiek vertikaliai, tiek horizontaliai.

Svarbiausia taisyklė yra ekranas: flex. Tai palyginti naujas vertė jungikliai ekranas containter su specialiu režimu, kad jos tiesioginis palikuonis naudoti ir suderinti visus erdvę containter (naudojant specialias ypatybes, kaip suderinti elementai ir kt.). Bakas turi nustatyti kai kurių plotis, ya plotis: 400px tik šiame pavyzdyje. Nereikia stilius turinio elementas, tačiau jis turi būti tiesioginis palikuonis iš bako.

Paramos ekranas: flex yra labai geras šiuolaikinių naršyklių. Pagaliau ne-pagalbinės naršyklės “Internet Explorer 9” ir 10 (versija 10 turi specialią sintaksę, flex). Jeigu jums yra svarbu optimizuoti tiems, ir senesnės naršyklės, jums turėtų skaityti likusią šio puslapio.

Originalus turinys, nuo 2004 su atnaujinimais:


Idėja

Kertinis akmuo sprendimas “Internet Explorer” 6, 7 arba užsukimas režimas yra šios: vidaus objektas yra absoliučiai išdėstyti pusė zonos aukštis. Tada yra perkeltas iki pusė jos aukštis. Klaidingai aiškinti, aukštis turto senesnes “Internet Explorer” yra naudojamas kaip funkcija čia (skaičiuojama aukštis yra laikoma pagrindu procentiniais aukštis lizdinė tags). Vieną papildomą sudėliotą žymę <div> reikia tiems, kurie Tyrinėtojai.

Sprendimas dėl standarto naršyklių, pavyzdžiui, “Mozilla”, “Opera”, “Safari” ir t.t. (įskaitant IE 8, 9, 10 ir jaunesni) yra visiškai kitokia. Visas plotas (top <div>”) yra nustatyta, kad rodoma, kaip stalas (rodyti: lentelė; dalis CSS2). Vidaus tikslas yra nustatyti, kaip stalo-cell (display: table-cell). Dabar — yra pagrindinė idėja — galima naudoti vertikaliai-suderinti nuosavybės tokio stalo rodomas elementas standartines naršykles. (Internet Exlorer 6, 7 ir užsukimas režimas nepaiso tų savybių, arba nežino savo vertės.)

Tada ir sintaksę, yra sujungti. Aš naudoju Pixy tai pabrėžti nulaužti, bet su ženklu #. Per CSS nuosavybės parašyta su char # pradžios (t. y. #position) yra matoma IE 7 ir vyresni. Toks rašytinis turtas yra nematomas, bet kita standartinė naršyklė (pvz., Internet Explorer 6 ir 7 interpretuoja #position: absolute; skirtingai nuo kitų naršyklių). Šios taip vadinamos “pabrėžė, hack”, atrodo, būti tikri, tačiau, jei jūs neturite norite jį naudoti, jums gali naudoti struktūrinį kodą žemiau, mano antras pavyzdys (deja, ne darbo IE 7). Kitų rūšių naršyklių ir Internet Explorer 8 ir jaunesnių nereikia būti įsilaužta, kaip jie palaiko display: table-cell tinkamai.

Suderinamumas

Kodas žemiau veikia “Internet Explorer” 5.0, 5.5, 6.0, 7, 8, 9 ir 10 beta, Gecko naršyklių (Mozilla, Firefox, Netscape 7), Operos 7, 8 ir kas Chrome, Konqueror 3.3.1. (gal per daug mažesnis), ir Safari (Win, iOS). Puslapis gali būti HTML, HTML5 arba XHTML, standarto ar užsukimas režimu.

Galioja pavyzdys neveikia IE 7 standartinis režimas (atnaujinti 2012: apie 3 % pacientų). Jei jums rasti bet lengva problemos sprendimas IE 7, prašome leiskite man žinoti.


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>

Pamatyti tai pavyzdžiui naršyklės

Legenda spalvos:

CSS stiliai kiekvienas naršyklė
CSS stiliai standartinės naršyklės

CSS stilius tik Internet Explorer 6, 7 ir užsukimas (su # nulaužti)


Rezultatas atrodo:

Pamatyti tai pavyzdžiui naršyklės


Tegul jis struktūrinių ir be nulaužti

(PASTABA: šis sprendimas galioja aprašyta toliau neveikia Internet Explorer 7 (standartiniame režime), nes IE7 nesupranta, stalo vertės ekranas turtą. Europos centre daiktas yra per didelis. BET: IE 7 yra naudojami tik apie 3 proc. vartotojų (2012) ir skaičius mažės. Jei jūs vis dar protas IE7 vartotojų, prašome naudoti ne pagrįstas sprendimas pirmiau, rašyti užsukimas režimu, ar naudoti html sąlyginis komentarus atskirti savybes IE 7 kažkaip.)

Pirmasis pavyzdys, svarbiausia yra ne gražus, bet aš tikiuosi, kad jūs turite tai suprato. Tai galima rašyti kodas skirtingai. Pavyzdžiui tokiu 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>

Ir struktūrinio galioja stilius:

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

Matyti galioja pavyzdžiui naršyklės (jis atrodo taip pat, kaip ir paskutinis).

Spalva legenda:

CSS stilius Internet Explorer 6 (ar užsukimas)
CSS stiliai standartinės naršyklės

CSS2 selektorių #value[id] yra lygi selektorių #value, bet Internet Explorer 6 ignoruoja šių tipų selektoriai su [id]. Paprastai: sintaksė *[foo] – bet kuris elementas su atributu kazkoks. Bet kuris HTML elementas #kažkas turi atributas id pagal apibrėžimą yra nustatyta, kad “kažkas”. Tai triukas — #value[id] darbai standartines naršykles tik (panašiai veikia .value[class])

Ten CSS nuosavybės statusą, nustatyti, kad absoliuti Internet Explorer. Kodas pozicija: statinio gauti jį atgal į numatytąją vertę, standartinės naršyklės (nuosavybės viršuje neveikia tada).


Tiek vertikalios ir horizontalios centravimas

Pagrindinė kodas bus tas pats, jums tik reikia įdėti šiek tiek papildomų CSS taisykles. Jei jūsų puslapis režimu standartinė, pridėti šį kodą:

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

Kaip jūs tikriausiai pamatyti, tai yra labiausiai paplitusi horizontalus centravimo metodas – auto kairę ir į dešinę paraštę. Nes maržos poreikius kosmoso Firefox ir Opera, jums reikia nustatyti plotis #outer div. Jei 100% nėra atitiktų jūsų poreikius, bet kokia kita reikšmė.

Svarbus dalykas yra nustatyti kai kurie tinkamai plotis #inner. Šis vadovėlis yra apie tai, vertikalus centravimo objektą su nežinoma aukštis. Aš manau, kad jūs žinote, plotis objektas (daugeliu atvejų jums bus tiesiog nuspręsti, kaip plačiai ji turėtų būti). Jūs galite naudoti pikselių vertės, arba procentinės dalies plotis. Jei centre objektas yra tik nežinomo dydžio vaizdą, jums nereikia nustatyti plotį.

Jei naudojate užsukimas režimas puslapio atvaizdavimas (režimas priklauso nuo to !Doctype, kaip žinote), pridėtinės kodas turėtų būti šiek tiek ilgiau, nes užsukimas režimas Exploder nesupranta, auto maržos, bet yra vienas gražus klaidą text-align žodžiu vietoj. Šis kodas turi dirbti tiek standartinių, tiek užsukimas režimas:

<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 kodą, kurį jūs turite įtraukti į ankstesniame pavyzdyje. Jei esate tingus derinti kodai, prašome žiūrėti pilną naršyklė: vertikali ir horizontali centravimo. Žinote, aš per daug tingus.


Kaip centro vertikaliai ant lango aukštis

Tuo pačiu būdu, ir tiesiog pridėti stilius:

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

</style>

Atrodo, kad #outer deklaracija turėtų būti pakankama, bet taip nėra. Kūno ir html deklaracija rinkiniai 100% lango aukštis bazę kitą procentą. Dabar tai yra geriau ne nustatyti perpildymo: hidden (kaip anksčiau pateiktuose pavyzdžiuose), nes kai turinys galėtų būti aukštesni, nei lango, tada tai būtų neįmanoma slinkti.

Grįžti į pagrindinį