Centra attēlus, tekstu un bloķēt elementus, veidojot vietnes
Ja jūs mācāties veidot vietnes , viens no visbiežāk sastopamajiem trikiem, kas jums būs jāapgūst, ir tas, kā pārlūkprogrammas logā atlasīt vienumus. Tas varētu nozīmēt, ka lapā tiek centrēts attēls, vai arī tas varētu būt centrāks pamatojums, piemēram, virsraksti kā daļa no projekta.
Pareizais veids, kā sasniegt šo vizuālo izskatu centrētu attēlu vai teksta vai pat visas jūsu tīmekļa lapas, ir, izmantojot Cascading Style Sheets (CSS) . Lielākā daļa centrēšanas īpašību ir bijuši CSS versijā kopš 1.0 versijas, un tie lieliski darbojas ar CSS3 un mūsdienu tīmekļa pārlūkprogrammām .
Tāpat kā daudzi tīmekļa dizaina aspekti, tīmekļa vietnes centrālo elementu izmantošanai ir vairāki veidi, kā izmantot CSS. Apskatīsim dažus citus veidus, kā izmantot CSS, lai sasniegtu šo vizuālo izskatu.
Par pārskatu par CSS izmantošanu centra elementiem HTML
Centrēšanās ar CSS var būt izaicinājums sākuma web dizaineriem, jo ir daudz dažādu veidu, kā izpildīt šo vienu vizuālo stilu. Kaut arī metožu dažādība var būt jauki vai pieredzējuši tīmekļa izstrādātāji, kuri zina, ka ne visas metodes strādā pie katra elementa, tas var būt ārkārtīgi sarežģīts jaunākajiem interneta profesionāļiem, jo dažādas metodes nozīmē, ka viņiem ir jāzina, kad izmantot šo pieeju. Vislabāk to izdarīt ir iegūt izpratni par dažām pieejām. Kad jūs sākat tos izmantot, jūs uzzināsiet, kura metode vislabāk darbojas, kādos gadījumos.
Augsta līmeņa jūs varat izmantot CSS, lai:
- Centra teksts
- Bloķēt līmeņa elementu (piemēram, sadalīšanu)
- Centrāmais attēls
- Vertikāli centrālo bloku vai attēlu
Daudzi (daudzi) gadi, web dizaineri varēja izmantot elementu
Centrālo tekstu ar CSS
Visvienkāršākā lieta, kas vērsta uz tīmekļa vietnes centru, ir teksts. Lai to izdarītu, jums ir tikai viens stila īpašums: teksta izlīdzināšana. Ņemiet CSS stilu tālāk, piemēram:
p.center {text-align: center; }
Ar šo CSS rindiņu katrs punkts, kas rakstīts ar centra klasi, centrā horizontāli atrodas tā vecāka elementā. Piemēram, ja punkts atrodas sadalījumā, tas nozīmē, ka tas bija šī sadalījuma bērns, tas būtu centrā horizontāli
Šeit ir šīs klases piemērs, kas tiek piemērots HTML dokumentā:
Šis teksts ir centrā.
Atcentājot tekstu ar teksta pielīdzināšanas īpašību, atcerieties, ka tas tiks centrēts tā saturā esošajā elementā un ne vienmēr būs centrā pilnībā pašā lapā. Atcerieties arī, ka liela satura blokiem var būt grūti izlasīt centrā pamatotu tekstu, tāpēc izmantojiet šo stilu mazliet. Virsraksti un mazi teksta bloki, piemēram, lapas vai cita satura teksta raksti, bieži vien ir viegli lasāmi un labi noskaņoti, kad centrā ir, bet lielākiem teksta blokiem, piemēram, pilnam pašam rakstam, būtu grūti lietot, ja saturs būtu pilnībā centrā pamatots. Atcerieties, ka lasāmība vienmēr ir galvenais, kad runa ir par vietnes tekstu!
Centrālo bloku saturs ar CSS
Bloki ir visi jūsu lapā esošie elementi, kuru platums ir noteikts un ir noteikts kā bloķēšanas līmeņa elements. Bieži vien šie bloki tiek izveidoti, izmantojot elementu HTML
div.center {
marža: 0 auto;
platums: 80em;
}
Šī marķējuma īpašuma CSS stenogrāfija noteiks augšējo un apakšējo robežu vērtību 0, bet kreisajā un labajā pusē - "auto". Tas būtībā ņem vērā jebkuru pieejamo vietu un dala to vienmērīgi starp skata loga abām pusēm, efektīvi centrējot elementu lapā.
Šeit tas tiek piemērots HTML:
bet teksts tajā ir izlīdzināts.
Kamēr jūsu blokam ir noteikts platums, tas centīsies iekšā satur elementu. Teksts, kas atrodas šajā blokā, tajā netiks centrā, bet tas tiks attaisnots pa kreisi. Tas ir tāpēc, ka tīmekļa pārlūkprogrammas noklusējuma teksts ir attaisnots. Ja vēlaties, lai teksts būtu centrēts, varat izmantot iepriekš tekstā ietverto teksta izlīdzināšanas līdzekli kopā ar šo metodi, lai centrātu sadalīšanu.
Attēlu centrēšana ar CSS
Lai gan lielākā daļa pārlūkprogrammu parāda attēlus, kas centrēti, izmantojot to pašu teksta izlīdzināšanas īpašību, par kuru mēs jau apskatījām punktu, nav ieteicams paļauties uz šo metodi, jo W3C to nav ieteicis. Tā kā tas nav ieteicams, vienmēr pastāv iespēja, ka pārlūkprogrammu nākotnes versijas varētu ignorēt šo metodi.
Tā vietā, lai attēlu centrā izmantotu teksta izlīdzināšanu, skaidri jāpasaka pārlūks, ka attēls ir bloķēšanas līmeņa elements. Tādā veidā jūs varat centrāties tāpat kā jebkuru citu bloku. Šeit ir CSS, lai tas notiktu:
img.center {
displejs: bloks;
margin-left: auto;
margin-right: auto;
}
Un šeit ir HTML, kas attēlam, kuru mēs vēlētos koncentrēt:
Jūs varat arī centrāties objektus, izmantojot in-line CSS (skatīt zemāk), taču šī pieeja NAV ieteikta, jo HTML atzīmēšanā tiek pievienoti vizuālie stili. Atcerieties, ka mēs vēlamies nošķirt stilu un struktūru, tādēļ CSS stilu pievienošana jūsu HTML kodam ar pārtraukumiem, kas nošķelti, un, ja tas ir iespējams, to vajadzētu izvairīties.
Centrālo elementu vertikāli ar CSS
Vertikāli vērstu objektu centrāšana vienmēr ir bijusi izaicinoša web dizains, bet CSS 3 CSS Flexible Box izkārtojuma moduļa izlaišana tagad ir veids, kā to izdarīt.
Vertikālā izlīdzināšana darbojas līdzīgi horizontālajai izlīdzināšanai, kas aprakstīta iepriekš. CSS īpašums ir vertikāli izlīdzināts ar vidējo vērtību.
.vcenter {
vertikāli-izlīdzināt: vidū;
}
Šīs pieejas negatīvie aspekti ir tādi, ka ne visas pārlūkprogrammas atbalsta CSS FlexBox, lai gan arvien vairāk tiek izmantota šī jaunā CSS izkārtojuma metode! Patiesībā visi modernās pārlūkprogrammas šodien tagad atbalsta šo CSS stilu. Tas nozīmē, ka jūsu vienīgā problēma ar Flexbox būtu daudz vecāka pārlūkprogrammas versija.
Ja jums ir problēmas ar vecākām pārlūkprogrammām, W3C iesaka konteinerā vertikāli ievietot tekstu, izmantojot šādu metodi:
- Novietojiet elementus, kas atrodas centrā elementa saturā, piemēram, div.
- Iestatiet minimālo augstumu uz saturošā elementa.
- Atzīt, ka satur elementu kā galda šūnu.
- Iestatiet vertikālo izlīdzinājumu uz "vidēji".
Piemēram, šeit ir CSS:
.vcenter {
min-augstums: 12em;
displejs: galda šūna;
vertikāli-izlīdzināt: vidū;
}
Un šeit ir HTML:
Šis teksts ir vertikāli centrēts lodziņā.
Vertikālā centrāle un vecākas Internet Explorer versijas
Ir daži veidi, kā piespiest Internet Explorer (IE) centrēt un pēc tam izmantot nosacītus komentārus, lai tikai IE redzētu stilus, taču tie ir mazliet loģiski un neglīti. Labās ziņas ir tādas, ka, tā kā Microsoft nesen pieņēma lēmumu samazināt atbalstu vecākajām IE versijām, šiem nepamatotiem pārlūkiem drīz vajadzētu būt izejai, lai tīmekļa izstrādātājiem būtu vieglāk izmantot modernas izkārtojuma metodes, piemēram, CSS FlexBox, kas padarīs visu CSS izkārtojumu, ne tikai centrējot, daudz vieglāk visiem web dizaineriem.