CSS: vertikalus teksto lygiavimas. Elementų derinimas

Problemos teiginys: būtina nustatyti vertikalų išlygiavimą eilutiniams arba įterptiniams bloko elementams bloko elemento viduje.

Problemos sprendimo būdai. Yra įvairių būdų, apsvarstykite pagrindinius:

1. Pateikite bloko elementą kaip lentelės langelį (rodymas: lentelė-ląstelė).
2. IE6-7: išraiškos metodas.
3. Tarpų tarp eilučių (eilutės aukščio savybė) ir bloko aukščio (vienos eilutės elementų) išlyginimas.
4. Padėties nustatymas išoriniu bloku (pozicija: absoliuti).

Na, apibendrinant, apsvarstykite kitą metodą:

5. Lygiavimas naudojant vertikalaus lygiavimo savybę.

ekranas: lentelės langelis

Vertikaliam lygiavimui pirminiam blokui taikoma ypatybė display: table-cell, todėl elementas imituoja lentelės langelį. Prie jo taip pat nustatytas aukštis ir vertikalus lygiavimas: vidurys:

Vertikalus lygiavimas. Ekranas: lentelės langelis

Privalumai:

Paprastumas;
Sulygiuoja tiek vieną, tiek kelias eilutes.

Minusai:

Neveikia IE7 ir senesnėse versijose;
Sunku manipuliuoti horizontalia lauko bloko padėtimi be papildomų konstrukcijų;
Ne visiems patinka ekrano naudojimas: lentelės langelis.

IE6-7: išraiškos metodas

Nes ankstesnis metodas neveikia IE6-7, tada turite išspręsti šią problemą.

Išraiška – trumpos JS kodo dalys, kurios dedamos į stiliaus lapą, vykdomos vieną kartą ir veikia tik IE. Išraiška neteisinga. Pridėkite šią kodo dalį prie ankstesnio pavyzdžio stiliaus failuose, skirtuose IE6 ir 7:

Įpakavimo priemonė p (z-indeksas: išraiška (runtimeStyle.zIndex = 1, this == ((200/2) -parseInt (offsetHeight) / 2))< 0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +"px"); }

Nėra prasmės svarstyti privalumus ir trūkumus, tk. nėra jokių privalumų, išskyrus tai, kad šis metodas papildo pirmąjį IE6-7, bet nuo to laiko šios naršyklės jau pasenusios, galite prieš jas užmerkti akis.

linijos aukštis

Norėdami sulygiuoti vieną teksto eilutę, pirminiam blokui galite naudoti tą patį aukštį ir tarpus tarp eilučių. Tinka mygtukams, meniu elementams ir kt.

Vertikaliai išlygiuota eilutė

Privalumai:

Paprastumas;
Suderinamumas tarp naršyklių.

Minusai:

Tinka tik vienos eilutės elementams;
Leidžia lygiuoti tik centre.

padėtis ir neigiama marža aukštyn

Elementą galima išlygiuoti vertikaliai, nurodant jam fiksuotą aukštį ir taikant padėtį: absoliučią ir neigiamą paraštės viršų, lygią pusei lygiuojamo elemento aukščio. Pirminiam blokui turi būti priskirta padėtis: santykinė:

Vertikalus lygiavimas. Linijos aukščio metodas

Aš esu vertikaliai išlygintas

Privalumai:

Suderinamumas tarp naršyklių;
Elementus galite lygiuoti centre arba bet kurioje kitoje padėtyje.

Minusai:

Daug laiko reikalaujantis elementų;
Sunku valdyti;
Turite žinoti ir nustatyti elemento aukštį;
Kai kuriose naršyklėse absoliutus padėties nustatymas gali pabloginti našumą.

Apatinė populiarių metodų eilutė

Kaip matote, šie metodai nėra universalūs – kiekvienas iš jų turi, nors ir nedidelių, trūkumų. Ekranas: table-cell metodas pasirodo pats universaliausias, bet man jis niekada nepatiko, be to, IE6-7 palaikymo neatsisakėme jau labai seniai. Todėl reikėjo dirbti prie kažko universalesnio. Apsvarstykite galimybę lygiuoti vertikaliai.

Lygiavimas su vertikaliu lygiavimu

Kaip žinote, vertikaliojo lygiavimo ypatybė neveikia bloko elementams, todėl nenaudinga jiems taikyti šią savybę. Tačiau ši savybė puikiai tinka įterptiesiems ir eilutiniams blokiniams elementams. Jei bandysime pritaikyti šią savybę elementams bloko elemento viduje, gausime tokį vaizdą:

1 elementas 2 elementas 3 elementas 4 elementas 5 elementas

Kaip matote, elementai išlygiuoti linijos, o ne viso bloko atžvilgiu, o tai mums netinka. Tada pabandykime įtraukti elementą į bloko vidų (kadangi inline elemento aukščio nustatyti negalima, elementas turi būti inline-block), kurio aukštis lygus išorinio bloko aukščiui. Papildyti (parodyta paveikslėlyje žemiau su pilka linija) ir gauname:

Vertikalus lygiavimas. Vertikalaus išlyginimo metodas

1 elementas 2 elementas 3 elementas 4 elementas 5 elementas

Nustatykime visus elementus vertikalus lygiavimas: viduryje.

Na, mes taip sutelkėme vieną eilutę. Ką daryti, jei jums reikia kelių eilučių? Ir čia nėra problemų. Jums tereikia nustatyti ekraną: teksto elementų eilutinį bloką:

Vertikalus lygiavimas. Vertikalaus išlyginimo metodas

1 elementas Elementas su dviem
teksto eilutės 3 elementas 4 elementas Elementas
su trimis
teksto eilutės

Jei suderinamumas su senesnėmis IE versijomis mums nėra svarbus, tada elementas galime pašalinti ir pakeisti jo stilius:

Įvynioklis: po (turinys: ""; ekranas: eilutinis blokas; aukštis: 100 %; plotis: 0 piks.; perpildymas: paslėptas; vertikaliai lygiuoti: viduryje;)

Verta atkreipti dėmesį į keletą dalykų:

Sulygiuotų elementų negalima perkelti.
Tarp gretimų eilutinio bloko elementų visada yra atstumas, todėl jei juos reikia prispausti vienas prie kito, išoriniam blokui nustatykite šrifto dydį: 0px; ir atkurti pačius elementus nustatydami norimą reikšmę.
Tokiu būdu vidiniams elementams galite nustatyti tas pačias reikšmes (viršuje, apačioje arba viduryje), ir skirtingas.

Privalumai:

Mėnesinio mokėjimo už svetainės reklamavimą paieškos sistemoje poreikis. Pagrindinis darbas svetainėje, siekiant efektyvaus jos reklamavimo ir darbo sąnaudų
Norėčiau 1 kartą mokėti už savo svetainės reklamą ir visada būti aukštoje konkurencinių užklausų paieškos rezultatuose, ar tai įmanoma?

Eismo skatinimas: klientų klausimai ir atsakymai
Nemažai klausimų apie svetainės lankomumo skatinimą. Tarifavimo niuansai, darbų kainos apskaičiavimas, abonentiniai mokesčiai.

Dažnai užduodami klausimai apie žiniatinklio analizę (DUK)
Klausimai, kuriuos dažnai užduoda žiniatinklio analizės paslaugos ir pačios paslaugos teikimo klientai. Kas yra žiniatinklio analizė? Kodėl projektui reikalinga žiniatinklio analizė? Kodėl reikia apibrėžti KPI ir kas jie yra? ir kt.

Kokie darbai NEĮtraukiami į SEO reklamuojant „Pixel Plus“?
Optimizavimas paieškos sistemoms apima didelį sąrašą darbų, kurių reikia norint pasiekti maksimalų rezultatą... Tačiau kokie darbai neįeina į SEO apmokėjimą?

Tekstų prieinamumas interneto svetainės reklamai, SEO tekstų optimizavimas paieškos užklausoms
Kodėl jums reikia teksto svetainėje? Niekas jo neskaito!

Reklamavimo ir svetainės reklamavimo rezultatų keitimo laikas, „Yandex“ (Yandex) reakcijos į svetainės pokyčius greitis
Mėnesį mokėjau už interneto svetainės reklamavimo paslaugas. Praėjo 10 dienų ir pozicijos Yandex nepagerėjo, dirbate ten ar ne?

Dažnai rinkimo metu reikia vertikaliai išlygiuoti tekstą bloke. Jei tai reikia padaryti lentelės langelyje, tada nustatoma vertikalaus lygiavimo CSS ypatybės reikšmė.

Tačiau kyla pagrįstas klausimas, ar galima apsieiti be lentelės, neperkraunant puslapio žymėjimo nereikalingomis žymomis? Atsakymas yra „galite“, tačiau dėl prasto CSS palaikymo MSIE naršyklėje jos problemos sprendimas skirsis nuo kitų įprastų naršyklių sprendimo.

Apsvarstykite toliau pateiktą fragmentą kaip pavyzdį:

Kažkoks tekstas

ir pabandykite vertikaliai sulygiuoti tekstą su bloko centru ir apatiniu bloko kraštu.

Problemos sprendimas

„Teisingos“ naršyklės (įskaitant MSIE

Dauguma šiuolaikinių naršyklių palaiko CSS2.1, ty lentelės langelio reikšmę rodymo ypatybei. Tai suteikia mums galimybę padaryti bloką su tekstu rodomą kaip lentelės langelį ir, pasinaudodami tuo, sulygiuoti tekstą vertikaliai:

div (
ekranas: lentelės langelis;
vertikalus lygiavimas: vidurys;
}

div (
ekranas: lentelės langelis;
vertikalus lygiavimas: apačioje;
}

Internet Explorer (iki 7-osios versijos imtinai)

Norėdami išspręsti problemą dėl teksto lygiavimo su apatiniu bloko kraštu MSIE, galite naudoti absoliučią padėties nustatymą (čia mums reikia įterpto elemento, įdėto į bloką):

div (
padėtis: santykinė;
}
div span (
ekranas: blokas;
padėtis: absoliuti;
dugnas: 0%;
liko: 0 %;
plotis: 100%;
}

Šis taisyklių rinkinys veikia ir „tinkamose“ naršyklėse.

Nurodykite savybes

Div span (
ekranas: blokas;
plotis: 100%;
}

nebūtina, bet gali prireikti, jei be vertikalaus teksto lygiavimo planuojate naudoti horizontalų lygiavimą, pavyzdžiui, teksto lygiavimas: centre;.

Vertikaliai išlygiuoti tekstą bloko centre, originalus fragmentas vis tiek turės būti sudėtingas - pristatysime dar vieną eilutinį elementą:

Studijų medžiaga:

Vertikalus centravimas CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Vertikalus centravimas naudojant CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
Vertikalus lygiavimas (www.cssplay.co.uk/ie/valign.html)
Vertical-align: viduryje (cssing.org.ua/2005/07/14/vertical-align-middle/)
Kitas būdas vertikaliai lygiuoti CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Įvairių elementų lygiavimas, pavyzdžiui, svetainėje ar puslapyje, iš pradžių kažkam yra nelengva užduotis, kuri išjudina vertikalų teksto lygiavimą. Kaip bebūtų keista, vienas iš sudėtingesnių CSS naudojimo būdų yra turinio sutelkimas. Centruoti turinį horizontaliai tam tikrais laiko momentais gana lengva. Beveik visada sunku centruoti turinį vertikaliai. Kito elemento centravimas vertikaliai išlygiuoti naudojant CSS. Tai tikrai labai dažnai užduodamas klausimas, keliantis problemų dizaineriams ir žiniatinklio valdytojams. Tačiau yra daug vertikaliojo centravimo metodų, ir kiekvieną iš jų gana paprasta naudoti.

Jei kada nors bandėte, tai sudėtinga, ypač jei nenorite naudoti lentelių. Laimei, mūsų pagalbos šauksmai buvo išgirsti, o vienas iš naujų ginklų, įtrauktų į CSS arsenalą, siekiant tai išspręsti, yra išdėstymo tipas, žinomas kaip lankstus dėžutės išdėstymas. Kaip jūs sužinosite po kelių akimirkų, tai suteikia jums keletą tikrai puikių funkcijų, supaprastinančių sudėtingus išdėstymus. Kai kurios šios puikios funkcijos taip pat leidžia sutelkti turinį vertikaliai ir horizontaliai, ką aptarsime šioje mokymo programoje. Tam tikru mastu galite tai padaryti naudodami paminkštinimus, tačiau tai gali perkelti jūsų išdėstymą į mažesnius ekranus. Pridėjus tinkintą CSS klasę prie stiliaus lapo, per kelias sekundes galite vertikaliai sucentruoti bet kokį turinį.

Horizontalus lygiavimas nustato, kaip kairysis ir dešinysis pastraipos kraštai yra išlygiuoti tarp kairiojo ir dešiniojo teksto laukelio kraštų. Vertikalus lygiavimas nustato vertikalią simbolio vietą teksto laukelyje. Gerų būdų, kaip vertikaliai centruoti elementus CSS, nebuvimas buvo tamsus jos reputacijos trūkumas beveik visą jo egzistavimą.

Pirmasis metodas su linijos aukščiu

Pirmasis metodas yra paprastas ir šiek tiek banalus, kuriame yra trūkumų, dėl kurių bus taikomi apribojimai. Koduojant svetainės HTML puslapius, teksto turinio eilučių tarpai tikriausiai yra vienas iš atributų, kuris paprastai išlieka numatytasis. Apskritai, turime nustatyti pačios linijos aukštį, kuris yra panašus į bloko kur aukštį linijos aukštis nuosavybė.

Tai pirmasis demonstracinėse versijose parodytas metodas

CSS

Constutesim_first (
kraštinė: 2px solid # bf1515;
aukštis: 175px;
}
.constutesim_first> p (
eilutės aukštis: 175 pikseliai;
paraštė: 0;
teksto lygiavimas: centre;
paminkštinimas: 0;
šrifto dydis: 17 pikselių;
spalva: # 3152a0;
šriftų šeima: Tahoma;
šrifto svoris: paryškintas;
}

Taip pat iš pirmo žvilgsnio galite pamatyti, kaip viskas atrodys realybėje.

Panašiu būdu galima įgyvendinti, kaip eksponuoti vaizdą, kuris bus centre ir tikrai vertikaliai. Belieka tik užregistruoti vieną nuosavybę vertikaliai sulygiuoti: vidurys; kuri yra atsakinga už vaizdo rodymą.

.png "> Antrasis variantas, pateikiamas kartu su vaizdu

CSS

Antrasis variantas (
kraštinė: 2px vientisa raudona;
linijos aukštis: 158 pikseliai;
}

Antrasis variantas div (
teksto lygiavimas: centre;
}
.second-variation img (
vertikalus lygiavimas: vidurys;
kraštinė: 0px solid # 3a3838;
}

Vaizdus įgyvendiname centre ir vertikalia kryptimi.

Sulygiavimas su padėties savybe

Tai turbūt labiausiai žinoma technika, tačiau dažniausiai naudojama su CSS. Tačiau čia reikia pridurti, kad jis taip pat nėra idealus, o šis metodas taip pat turi savo nedidelių niuansų, susijusių su elemento centru, kad jei jis bus nustatytas procentais, jis bus centre kairėje elemento pusėje. viršutinėje pusėje, paties tinklaraščio viduje.

CSS

Competaird parinktis (
kraštinė: 2px solid # d40e0e;
aukštis: 162px;
padėtis: santykinė;
}
.competaird-option div (
padėtis: absoliuti;
viršuje: 50%;
liko: 50%;
aukštis: 28%;
plotis: 49%;
marža: -2% 0 0 -25%;
kraštinė: 2px solid # 4a4848;
}

Tarpai tarp eilučių arba eilutės aukštis yra vertikalus aukštis tarp teksto eilučių pateiktame HTML puslapyje. Beveik visada šią atstumo reikšmę į atitinkamą reikšmę nustato naršyklė arba atvaizdavimo priemonė. Ši reikšmė paprastai priklauso nuo rodomo puslapio šrifto ir kitų veiksnių.

Sulygiavimas su lentelės savybe

Šiuo metodu naudojame išbandytą seną metodą, kai elementus perdarysime į lentelę, kurioje yra ląstelės. Kalbant apie žymą lentelė, ji čia nebus naudojama, čia mes nustatysime visiškai kitą CSS ypatybę, tai yra display: table ;, display: table-cell ;. Jei kalbėsime apie seniausias IE versijas, tada čia esantys duomenys tiesiog nebus rodomi. Tikiuosi, kad atnaujinote naršyklę, nes ji paseno ir beveik viskas rodoma netinkamai.

Chereverto variacija (
kraštinė: 2px solid # c30b0b;
aukštis: 173px;
ekranas: stalas;
plotis: 100%;
šrifto dydis: 17 pikselių;
šrifto svoris: paryškintas;
spalva: # 3945a0;
}

Chereverto variantas div (
ekranas: lentelės langelis;
vertikalus lygiavimas: vidurys;
teksto lygiavimas: centre;
}

Pirmiausia pažvelkime į numatytąjį, kurį naudoja dauguma naršyklių. Daugumoje šiuolaikinių dieninių naršyklių tarpai tarp eilučių.

Suderinimas su lankstumo savybe

Čia mes pasiekiame originalesnę versiją, kuri turi savo savybes, kurias retai galima rasti interneto šaltinio išdėstyme. Bet vis tiek jie taikomi, kad kai kuriais atvejais yra naudingi. Taip nustatoma pagrindinė ašis, kad krypties apibrėžimas tilptų į diskelių talpyklą.

Suderinimas su lankstumo savybe

CSS

Variantas-horizontalus (
kraštinė: 2px solid # d20c0c;
aukštis: 147px;
ekranas: lankstus;
sulyginti elementus: centre;
pateisinti-turinys: centras;
šrifto dydis: 18 pikselių;
šrifto svoris: paryškintas;
spalva: # 49518c;
}

Galite nurodyti eilutės aukščio reikšmę taip pat, kaip nurodytumėte bet kurį kitą css dydį, kaip skaičių, pikselių dydį arba procentą.

Sulygiavimas su transformacijos savybe

Ir dabar mes priėjome prie ekstremalausio metodo, bet ne prie paskutinio, kalbant apie jo naudojimą interneto dizaino srityje. Čia viskas paprasta, nurodytą elementą reikia perkelti vertikaliai pagal jums reikalingą vertę. Nuosavybė transformuoti, tai yra transformacijų, kurias diegimo programa taiko diegdama paketą, sąrašas. Montuotojas taiko transformacijas tokia tvarka, kokia jos nurodytos nuosavybėje.

Sulygiavimas su transformacijos savybe

CSS

Vertikali-medilpasudsa (
kraštinė: 2px solid # e00a0a;
aukštis: 158px;
šrifto dydis: 19 pikselių;
šrifto svoris: paryškintas;
spalva: # 353c71;
}
.vertical-medilpasudsa> div (
padėtis: santykinė;
viršuje: 50%;
transformuoti: translateY (-50%);
teksto lygiavimas: centre;
}

Kai pateiksite reikšmes kaip skaičių, jis bus pagrįstas dabartiniu šrifto dydžiu kaip pagrindu. Dabartinis šrifto dydis padauginamas iš jūsų nurodyto skaičiaus, kad būtų galima apskaičiuoti eilutės aukštį arba tarpą tarp eilučių.

Jei norite centruoti simbolius elemente horizontaliai, turite naudoti text-align: center. Viena parinktis, jei norite centruoti vertikaliai ir turite fiksuotą poraštę bei vieną teksto eilutę, nustatykite eilutės aukštį taip, kaip ir poraštės aukštis.

Jei reikia centruoti tekstą elemente, pvz., div, antraštėje ar pastraipoje, galite naudoti CSS teksto lygiavimo ypatybę.

Teksto lygiavimas turi keletą galiojančių savybių:

Centras: Tekstūra yra centre;
liko: Sulygiuos į kairę konteinerio pusę;
dešinėje: Sulygiuotas su konteinerio dešine puse
pateisinti: Priverstas lygiuotis tiek kairiajame, tiek dešiniajame konteinerio krašte, išskyrus kraštutines linijas;
pateisinti viską: Sukelia kraštutinę eilutę, kad pateisintų simbolius;
pradžia: Tas pats kaip ir kairėje, tik jei kryptis eina iš kairės į dešinę. Bet tai bus teisinga, jei iš pradžių nustatysite teksto krypties kryptį, kuri vyks iš dešinės į kairę;
Galas: Pradžios priešingybė;
atitikmuo: Panašiai kaip ir paveldėjimas, išskyrus pradžią ir pabaigą, jis apskaičiuojamas pagal pirminį elementą;

Naudokite šias ypatybes, kad lygiuotumėte tekstą pirminiame arba vyniojamajame div. Jei norite elemento tekstą centruoti horizontaliai, turite naudoti text-align: center.

Viena parinktis, jei norite centruoti vertikaliai, jei turite fiksuotą antraštę ir vieną teksto eilutę, nustatykite eilutės aukštį taip, kad jis būtų toks pat kaip poraštės aukštis.

Naudojant CSS kai kuriuos iš pažiūros paprastus dalykus atlikti nėra lengva. Vienas iš šių dalykų yra lygiavimas, t.y. kai vieną elementą reikia išdėstyti tam tikru būdu kito atžvilgiu.

Šiame straipsnyje pateikiami keli paruošti sprendimai, padėsiantys supaprastinti centravimo elementų darbą horizontaliai ir (arba) vertikaliai.

Pastaba: po kiekvienu sprendimu yra naršyklių sąrašas, kuriame nurodomos versijos, kuriose veikia nurodytas CSS kodas.

CSS – išlygiuoti bloką centre

1. Sulygiuokite vieną bloką su kito centru. Šiuo atveju pirmasis ir antrasis blokai turi dinaminius matmenis.

...

Tėvas (pozicija: santykinis;) .vaikas (pozicija: absoliuti; kairėje: 50 %; viršuje: 50 %; -webkit-transform: išversti (-50%, -50%); -moz-transform: versti (-50%) , -50 %); -ms-transform: išversti (-50%, -50%); -o-transform: išversti (-50%, -50%); transformuoti: išversti (-50%, -50%) ;)

Chrome 4.0 ir naujesnės versijos
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Sulygiuokite vieną bloką su kito centru. Šiuo atveju antrasis blokas turi fiksuotus matmenis.

Tėvas (padėtis: santykinis;) .vaikas (pozicija: absoliuti; kairėje: 50%; viršuje: 50%; / * 2 blokų plotis ir aukštis * / plotis: 500 pikselių; aukštis: 250 pikselių; / * Reikšmės nustatomos remiantis jo dydis * / / * paraštė-kairė = - plotis / 2 * / paraštė-kairė: -250 pikselių; / * paraštė-viršus = - aukštis / 2 * / paraštė-viršus: -125 pikseliai;)