Kas jāzina
- Lai centrētu tekstu, izmantojiet šādu kodu ("[/]" apzīmē rindas pārtraukumu): .center [[/] text-align: center; [/] }.
- Centra satura bloki ar šādu kodu ("[/]" apzīmē līnijas pārtraukumu): .centra [[/] starpība: automātiska; [/] platums: 80em; [/] }.
- Lai centrētu attēlu ("[/]" apzīmē līnijas pārtraukumu): img.center {[/] display: block; [/] atstarpe pa kreisi: automātiska; [/] margin-right: auto; [/] }.
CSS ir labākais veids, kā centrēt elementus, taču tas var būt izaicinājums iesācēju tīmekļa dizaineriem, jo ir ļoti daudz veidu, kā to paveikt. Šajā rakstā ir paskaidrots, kā CSS izmantot teksta, teksta bloku un attēlu centrēšanai.
Teksta centrēšana ar CSS
Lai centrā tekstu lapā, jums jāzina tikai viens stila rekvizīts:
.center {
text-align: center;
}
Izmantojot šo CSS rindu, katrs rindkopa, kas rakstīta ar .center klasi, tiks centrēta horizontāli tā vecāka elementa iekšpusē. Piemēram, rindkopa iekšpusē (šīs nodaļas bērns) tiks centrēta horizontāli iekšpusē.
Lūk, šīs klases piemērs, kas tiek izmantots HTML dokumentā:
Šis teksts ir centrēts.
Centrējot tekstu ar rekvizītu text-align, atcerieties, ka tas tiks centrēts tā saturošajā elementā un ne vienmēr pašā pašā lapā.
Vietnes teksta lasīšanai vienmēr ir galvenā nozīme. Liels centra pamatota teksta bloki var būt grūti lasāms, tāpēc izmantojiet šo stilu taupīgi. Virsraksti un nelieli teksta bloki, piemēram, raksta teksta teksts, parasti ir viegli lasāmi, kad ir centrēti; tomēr lielākus teksta blokus, piemēram, pilnu rakstu, būtu grūti patērēt, ja tas būtu pilnībā attaisnots centrā.
Satura bloku centrēšana ar CSS
Satura bloki tiek izveidoti, izmantojot HTML.
.center {
margin: auto;
platums: 80em;
}
Šis CSS stenogrāfs maržas rekvizītam iestatīs augšējās un apakšējās malas uz vērtību 0, bet kreisajā un labajā pusē izmantos "auto". Šis būtībā aizņem visu pieejamo vietu un vienmērīgi sadala skatu loga abās pusēs, efektīvi centrējot elementu uz lapu.
Šeit tas tiek lietots HTML:
Viss šis bloks ir centrēts,bet teksts tā iekšpusē ir līdzināts pa kreisi.
Kamēr jūsu blokam ir noteikts platums, tas tiks centrēts saturošā elementa iekšpusē. Šajā blokā esošais teksts netiks centrēts tajā, bet tiks pamatots ar kreiso pusi. Tas ir tāpēc, ka teksts ir pamatots ar kreiso kreisi kā noklusējums tīmekļa pārlūkprogrammās. Ja vēlaties, lai arī teksts būtu centrēts, sadalījuma centrēšanai varat izmantot iepriekš aprakstīto rekvizītu text-align kopā ar šo metodi.
Attēlu centrēšana ar CSS
Lai gan lielākajā daļā pārlūkprogrammu attēli tiks parādīti centrā, izmantojot to pašu rekvizītu teksta izlīdzināšana, W3C to neiesaka. Tāpēc vienmēr pastāv iespēja, ka nākamās pārlūkprogrammu versijas var izvēlēties ignorēt šo metodi.
Tā vietā, lai attēla centrēšanai izmantotu teksta līdzināšanu, pārlūkprogrammai ir skaidri jāpasaka, ka attēls ir bloka līmeņa elements. Tādā veidā jūs varat to centrēt tāpat kā jebkuru citu bloku. Šeit ir CSS, lai tas notiktu:
img.center {
displejs: bloks;
atstarpe pa kreisi: automātiska;
margin-right: auto;
}
Un šeit ir attēla HTML kods:
Varat arī centrēt objektus, izmantojot iekļauto CSS (skatīt zemāk), taču šī pieeja nav ieteicama, jo tā HTML marķējumam pievieno vizuālos stilus. Atcerieties, stilam un struktūrai jābūt atsevišķai; CSS stilu pievienošana HTML izjauks šo atdalīšanu, un kā tāds jums vajadzētu izvairīties, kad vien iespējams.
Elementu centrēšana vertikāli ar CSS
Objektu centrēšana vertikāli vienmēr ir bijusi sarežģīta tīmekļa dizainā, taču CSS elastīgais kastes izkārtojuma modulis CSS3 nodrošina veidu, kā to izdarīt.
Vertikālā izlīdzināšana darbojas līdzīgi iepriekš aprakstītajai horizontālajai izlīdzināšanai. CSS rekvizīts ir vertikāli izlīdzināts, piemēram:
.vcenter {
vertikāli-izlīdzināt: vidus;
}
Visas mūsdienu pārlūkprogrammas atbalstīt šo CSS stilu. Ja rodas problēmas ar vecākām pārlūkprogrammām, W3C iesaka tekstu vertikāli centrēt konteinerā. Lai to izdarītu, ievietojiet elementus saturoša elementa iekšpusē, piemēram, a div, un iestatiet uz tā minimālo augstumu. Paziņojiet saturošo elementu kā tabulas šūnu un iestatiet vertikālo izlīdzinājumu uz "vidū".
Piemēram, šeit ir CSS:
.vcenter {
min-augstums: 12em;
displejs: tabulas šūna;
vertikāli-izlīdzināt: vidus;
}
Un šeit ir HTML:
Šis teksts ir vertikāli centrā lodziņā.
Nelietojiet HTML elementu attēlu un teksta centrēšanai; tas ir novecojis, un mūsdienu tīmekļa pārlūkprogrammas to vairs neatbalsta. Tas lielā mērā ir atbilde uz HTML5 skaidru struktūras un stila atdalīšanu: HTML rada struktūru, un CSS nosaka stilu. Tā kā centrēšana ir elementa vizuālā īpašība (kā tas izskatās, nevis kā tas ir), šis stils tiek apstrādāts ar CSS, nevis HTML. Tā vietā izmantojiet CSS, lai jūsu lapas tiktu parādītas pareizi un atbilstu mūsdienu standartiem.
Internet Explorer vertikālā centrēšana un vecākas versijas
Varat piespiest pārlūkprogrammu Internet Explorer (IE) centrēt un pēc tam izmantot nosacītus komentārus, lai tikai IE redzētu stilus, taču tie ir nedaudz izteiksmīgi un nepievilcīgi. Microsoft 2015. gada lēmums atteikties no atbalsta vecākas IE versijastomēr padarīs šo jautājumu par aktuālu, jo IE vairs nedarbosies.