Dom - Oporavak
Centrirajte element na css stranice. Centriranje diva i druge suptilnosti pozicioniranja

Okomito centriranje elemenata pomoću CSS-a zadatak je koji programerima predstavlja određene poteškoće. Međutim, postoji nekoliko metoda za njegovo rješavanje, koje su prilično jednostavne. Ova lekcija predstavlja 6 opcija za okomito centriranje sadržaja.

Počnimo s općim opisom problema.

Problem okomitog centriranja

Horizontalno centriranje je vrlo jednostavno i lako. Kada je centrirani element u liniji, koristimo svojstvo poravnanja u odnosu na nadređeni element. Kada je element na razini bloka, postavljamo njegovu širinu i automatsko postavljanje lijeve i desne margine.

Većina ljudi, kada koristi svojstvo text-align:, poziva se na svojstvo vertical-align za okomito centriranje. Sve izgleda sasvim logično. Ako ste koristili predloške tablica, vjerojatno ste intenzivno koristili atribut valign, koji učvršćuje uvjerenje da je okomito poravnanje pravi način za rješavanje problema.

Ali atribut valign radi samo na ćelijama tablice. A svojstvo okomitog poravnanja vrlo mu je slično. Također utječe na ćelije tablice i neke ugrađene elemente.

Vrijednost svojstva vertical-align relativna je u odnosu na nadređeni inline element.

  • U retku teksta, poravnanje je u odnosu na visinu retka.
  • Ćelija tablice koristi poravnanje u odnosu na vrijednost izračunatu posebnim algoritmom (obično visina retka).

No, nažalost, svojstvo okomitog poravnanja ne radi na elementima na razini bloka (na primjer, odlomci unutar elementa div). Ova situacija može navesti na pomisao da nema rješenja za problem okomitog poravnanja.

Ali postoje i druge metode za centriranje blok elemenata, čiji izbor ovisi o tome što se centrira u odnosu na vanjski spremnik.

Metoda visine linije

Ova metoda radi kada želite okomito centrirati jedan redak teksta. Sve što trebate učiniti je postaviti visinu retka da bude veća od veličine fonta.

Prema zadanim postavkama, bijeli prostor će biti ravnomjerno raspoređen na vrhu i dnu teksta. I linija će biti centrirana okomito. Često je visina linije jednaka visini elementa.

HTML:

Obavezan tekst

CSS:

#child (line-height: 200px;)

Ova metoda radi u svim preglednicima, iako se može koristiti samo za jedan redak. Vrijednost 200 px u primjeru odabrana je proizvoljno. Možete koristiti bilo koju vrijednost veću od veličine fonta teksta.

Centriranje slike pomoću visine linije

Što ako je sadržaj slika? Hoće li gornja metoda funkcionirati? Odgovor leži u još jednom retku CSS koda.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Vrijednost svojstva line-height mora biti veća od visine slike.

Metoda CSS tablice

Gore je spomenuto da se svojstvo vertikalnog poravnanja koristi za ćelije tablice, gdje odlično funkcionira. Naš element možemo prikazati kao ćeliju tablice i upotrijebiti svojstvo vertikalnog poravnanja na njemu za okomito centriranje sadržaja.

Bilješka: CSS tablica nije isto što i HTML tablica.

HTML:

Sadržaj

CSS:

#parent (display: table;) #child ( display: table-cell; vertical-align: middle; )

Postavljamo izlaz tablice na nadređeni div element i ispisujemo ugniježđeni div element kao ćeliju tablice. Sada možete koristiti svojstvo vertikalnog poravnanja na unutarnjem spremniku. Sve u njemu bit će centrirano okomito.

Za razliku od gornje metode, u ovom slučaju sadržaj može biti dinamičan jer će div element mijenjati veličinu u skladu sa svojim sadržajem.

Nedostatak ove metode je što ne radi u starijim verzijama IE-a. Morate koristiti svojstvo display: inline-block za ugniježđeni spremnik.

Apsolutno pozicioniranje i negativne marže

Ova metoda također radi u svim preglednicima. Ali zahtijeva da se elementu koji se centrira dodijeli visina.

Primjer koda izvodi vodoravno i okomito centriranje u isto vrijeme:

HTML:

Sadržaj

CSS:

#roditelj (položaj: relativan;) #dijete (položaj: apsolutni; gore: 50%; lijevo: 50%; visina: 30%; širina: 50%; margina: -15% 0 0 -25%; )

Prvo postavljamo vrstu pozicioniranja elementa. Zatim postavljamo svojstva gornje i lijeve strane ugniježđenog div elementa na 50%, što odgovara središtu nadređenog elementa. Ali središte je gornji lijevi kut ugniježđenog elementa. Stoga ga morate podići (polovica visine) i pomaknuti ulijevo (polovica širine), a tada će se središte podudarati sa središtem nadređenog elementa. Dakle, poznavanje visine elementa u ovom slučaju je neophodno. Zatim postavljamo element s negativnim gornjim i lijevim marginama jednakima polovici visine odnosno širine.

Ova metoda ne radi u svim preglednicima.

Apsolutno pozicioniranje i rastezanje

Primjer koda izvodi okomito i vodoravno centriranje.

HTML:

Sadržaj

CSS:

#roditelj (položaj: relativno;) #dijete (položaj: apsolutni; vrh: 0; dno: 0; lijevo: 0; desno: 0; širina: 50%; visina: 30%; margina: auto; )

Ideja iza ove metode je rastegnuti ugniježđeni element na sve 4 granice nadređenog elementa postavljanjem svojstava top, bottom, right i left na 0.

Postavljanje margina za automatsko generiranje na svim stranama postavit će jednake vrijednosti na sve 4 strane i centrirati naš ugniježđeni div element na njegov nadređeni element.

Nažalost, ova metoda ne radi u IE7 i starijim verzijama.

Jednaki prostori iznad i ispod

U ovoj metodi, jednako ispunjavanje je eksplicitno postavljeno iznad i ispod nadređenog elementa.

HTML:

Sadržaj

CSS:

#parent ( padding: 5% 0; ) #child ( padding: 10% 0; )

Primjer CSS koda postavlja gornje i donje ispune za oba elementa. Za ugniježđeni element, postavljanje ispune poslužit će za okomito centriranje. I ispuna nadređenog elementa centrirat će ugniježđeni element unutar njega.

Relativne mjerne jedinice koriste se za dinamičku promjenu veličine elemenata. A za apsolutne mjerne jedinice morat ćete napraviti izračune.

Na primjer, ako nadređeni element ima visinu od 400 piksela, a ugniježđeni element 100 piksela, tada je potrebno 150 piksela ispune na vrhu i dnu.

150 + 150 + 100 = 400

Korištenje % omogućuje vam da izračune prepustite pregledniku.

Ova metoda radi posvuda. Loša strana je potreba za izračunima.

Bilješka: Ova metoda funkcionira postavljanjem vanjskog ispuna elementa. Također možete koristiti margine unutar elementa. Odluka o korištenju margina ili ispuna mora se donijeti ovisno o specifičnostima projekta.

plutajući div

Ova metoda koristi prazan div element koji pluta i pomaže kontrolirati položaj našeg ugniježđenog elementa u dokumentu. Imajte na umu da se plutajući div nalazi ispred našeg ugniježđenog elementa u HTML kodu.

HTML:

Sadržaj

CSS:

#parent (visina: 250px;) #floater (float: lijevo; visina: 50%; širina: 100%; margin-bottom: -50px; ) #child (jasno: oboje; visina: 100px; )

Pomaknemo prazan div ulijevo ili udesno i postavimo mu visinu na 50% nadređenog elementa. Na taj način ispunit će gornju polovicu nadređenog elementa.

Budući da je ovaj div plutajući, uklonjen je iz normalnog tijeka dokumenta i moramo razmotati tekst na ugniježđenom elementu. Primjer koristi clear: both , ali sasvim je dovoljno koristiti isti smjer kao pomak plutajućeg praznog div elementa.

Gornja granica ugniježđenog div elementa je neposredno ispod donje granice praznog div elementa. Moramo pomaknuti ugniježđeni element prema gore za pola visine plutajućeg praznog elementa. Da biste riješili problem, upotrijebite negativnu vrijednost svojstva margin-bottom za plutajući prazan div element.

Ova metoda također radi u svim preglednicima. Međutim, njegovo korištenje zahtijeva dodatni prazan div element i poznavanje visine ugniježđenog elementa.

Zaključak

Sve opisane metode jednostavne su za korištenje. Poteškoća je u tome što nijedan od njih nije prikladan za sve slučajeve. Morate analizirati projekt i odabrati onaj koji najbolje odgovara zahtjevima.

Analiziramo poravnanje blok elemenata u CCS. Stavljamo nekoliko u središte DIV ili LI elementi. Nudim nekoliko svojih opcija za većinu slučajeva.

Ovaj članak nema za cilj navesti sve mogućnosti poravnanja i prepisati ono što već negdje postoji. Ne sjećam se zašto, ali često nisam bio zadovoljan ponuđenim opcijama. Ili su postojali fiksni blokovi, ili se sve raspalo tijekom adaptivnog izgleda ili neki drugi nedostaci.

Ponekad je za poravnanje prema središtu dovoljno dodati nekoliko atributa i ne treba vam ništa komplicirano. Na primjer, i ja sam.

Ispod je nekoliko opcija za prilagodljivi izgled za poravnavanje blokova u sredini, koje sam ja koristim na svojim web stranicama. I ako je prvi prilično čest, onda možda neke druge metode neće biti niti opisane na Internetu na ovaj način.

Opcija 1

Jednostavno poravnavanje svih blokova prema sredini stranice.

Idemo u centar UL sadržaj od 4 elementa LI, koji se nalaze u bloku DIV s razredom spremnik.






U ovom slučaju dovoljna su sljedeća pravila u CSS-u:

Spremnik (
širina: 100%;
}

Kontejner ul (
poravnanje teksta: središte;
list-style: nijedan;
}

Spremnik li (
prikaz: inline-block;
}

Dobivamo sljedeći prikaz: Ovdje su centrirana 4 LI elementa. Kada se veličina zaslona smanji, elementi koji ne odgovaraju pomiču se prema dolje.

Ako blokovi LI s tim svojstvima nisu instalirani u središtu, što znači da ih neko drugo svojstvo ometa. Na primjer, ovo bi moglo biti vlasništvo float:lijevo ili prikaz: stol; ili neki drugi.

Sada možete dodati druge stilove u gornju strukturu (u osnovni okvir CSS poravnanja). Na primjer, napravite blokove fiksne veličine i međusobno uvucite:

Spremnik li (
prikaz: inline-block;
margina: 5px;
širina: 100px;
}

Dobivamo sljedeće:

Ali postoji jedan nedostatak ove opcije. Blokovi se nalaze u središtu, ali su velike udaljenosti lijevo i desno. Mogu se smanjiti promjenom širine.

Ili možete napraviti spremnike iste veličine tako da udubine budu samo između spremnika, a s lijeve i desne strane ih neće biti.

Onda ćemo ukloniti margina i dodajte širinu ovoga širina tako da potpuno pokrije područje.

Spremnik li (
okomito poravnanje: gore;
prikaz: inline-block;
širina: 32,899%;
}

Između blokova bit će mali prostor praznog prostora. A da biste ga učinili još većim, možete se povući unutra pomoću parametra podstava.

U blokove namjerno ne dodajem ništa dodatno kako bih ostavio upravo one stilove koji izravno utječu na poravnanje. Ali ako učinite isto, nećete dobiti takve blokove. Barem zato što, prvo, trebate dodati boju bloku, a drugo, ako je prazan, stavite visina: 100px;. Ostali atributi su po vašoj želji.

Konačna verzija je:

Na gornjoj snimci zaslona ostavio sam druga područja stranice tako da je jasno gdje su granice blokova, jer ako su uz rub, tada se sam rub više ne vidi. A na slici su bijeli rubovi lijevo i desno različito poravnanje koje nema ništa zajedničko s dotičnim primjerom. Ponavljam, sami blokovi su uz rubove, koji nisu vidljivi, jer ih blokovi potpuno prekrivaju.

opcija 2

Postoji mnogo načina za centriranje blokova. Ali ako trebate napraviti poravnanje pametnije, morate razbiti mozak. Srećom, došao sam do zanimljive metode za sljedeće svrhe:

Kako centrirati sve divove tako da blok u sljedećem retku bude lijevo poravnat?

Imamo sljedeću strukturu:



Blok 1


Blok 2


blok 3


Blok 4


blok 5

Za njih pišemo tečajeve:


širina: 90%;
margina: 0 auto;
}

Arhiva-članak (
prikaz: inline-block;
okomito poravnanje: gore;

Širina: calc(33,3333% - (0,666666666667 * 36px));
margina: 0 10px 0 11px;
}

Imajte na umu da ako promijenite veličine kalk, tada morate eksperimentalno prilagoditi dimenzije margina. Inače blokovi neće biti centrirani.

Ovo poravnanje mora se izvršiti na oko. Ali ako ima manje blokova u novom retku nego u retku iznad, ovaj usamljeni blok bit će uz lijeva strana. I izgleda puno ljepše nego kada se u susjednoj liniji jedan jedini blok nalazi u centru.

Primjenom gornje tehnike dobit ćemo prilagodljiv izgled, sa svim rubovima jednakim, koji se neće pogoršati pri promjeni veličina zaslona.

A ako želimo da mobilna verzija nema 3 bloka, već 2, tada ćemo u ccs za razlučivost od 768 piksela blokove podijeliti drugačije:

@medijski zaslon i (maksimalna širina: 768px) (
.arhivski-članak (
širina: calc(47,3333% - (0,666666666667 * 25px));
margina: 0 10px 0 20px;
}
}

Uzmimo iste blokove u mobilnoj verziji, ali s dva bloka po retku:

Opcija 3

Sada ćemo poravnati pomoću savijati. Ovo se može činiti kao idealan način za izravnavanje, jer zapravo radi vrlo jednostavno. Međutim, FLEX se ne nosi sa zadatkom opisanim u opciji 2. Barem ja nisam uspio postići iste rezultate.

Na sljedeći odjeljak:

Dodavanje stilova:

#cssmenu (
margina: 20px auto;
}

#cssmenu ul (
list-style: nijedan;
zaslon: savitljiv;
flex-wrap: omot;
justify-content: centar;
}

#cssmenu > ul > li (
margina: 1px;
}

Dobivamo:

U navedenom primjeru:

flex-wrap: omot;

Premješta blokove u sljedeći redak ako popune spremnik. Inače će ići dalje izvan prozora preglednika.

justify-content: centar;

Poravnavamo sadržaj blokova prema sredini.

Opcija 4

Još jedna mogućnost poravnanja pomoću flex tehnologije.

Imamo kontejner s dva bloka unutra. Potrebna su nam ova 2 bloka da podijelimo širinu na dvije jednake strane.


Blok 1

Blok 2

Da bismo to učinili, zapisat ćemo sljedeća svojstva u stilovima:

Spremnik (
zaslon: savitljiv;
}

Blokiraj (
fleksibilna osnova: 100%;
}

Opcija 5

Postoji još jedna opcija za centriranje blokova, ako je njihov broj strogo jednak. Na primjer: postoji 9 blokova, 3 za svaki red. I znaš da će tako uvijek ostati. Na primjer, stvarate odredišnu stranicu i sigurno znate da ništa nepotrebno neće biti dodano na web mjesto između ovih blokova.

Dakle, imamo 9 blokova sljedećeg tipa (nisam duplicirao linije 9 puta, ali imajte na umu da postoji 9 blokova):



Blok 1


Blok 2


blok 3

Primijenite stilove za njih:

Arhivski spremnik-za-članke (
širina: 100%;
poravnanje teksta: središte;
}

Arhiva-članak (
širina: 25%;
okomito poravnanje: gore;
prikaz: inline-block;
poravnanje teksta: lijevo;
}

Arhiva-članak:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
margina: 20px 0 30px 40px;
}

Arhiva-članak:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
margina: 20px 40px 30px;
}

Arhiva-članak:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
margina: 20px 40px 30px 0;
}

Dobit ćemo i prilagodljivi izgled. Kada se zaslon smanji, blok koji ne stane ići će dolje u sredinu

Prednost ove vrste centriranja je u tome što možete jasno i jasno napraviti udubljenja između blokova.

Glavni nedostatak je što se ništa ne može staviti unutar blokova. Bilo koji element:

budi to div ili str ili nešto drugo, smatrat će se unutarnjim elementom n-to dijete. Kao rezultat toga, CSS stilovi će biti superponirani na njega i sve uvlake napravljene korištenjem margine će pomaknuti blokove drugačije nego što je izvorno predviđeno.

Postoji nekoliko bitno različitih načina okomitog centriranja objekta pomoću CSS-a, ali odabir pravog može biti težak. Pogledat ćemo neke od njih, te izraditi malu web stranicu koristeći stečeno znanje.

Okomito središnje poravnanje nije lako postići pomoću CSS-a. Postoji mnogo načina i ne rade svi u svim preglednicima. Pogledajmo 5 različitih metoda te prednosti i nedostatke svake od njih. Primjer.

1. metoda

Ova metoda pretpostavlja da smo postavili neki element

metodu prikaza kao tablicu, nakon toga u njoj možemo koristiti svojstvo vertical-align (koje radi različito u različitim elementima).

Neke korisne informacije koje bi trebale biti centralno smještene.
#wrapper( display: table; ) #cell( display: table-cell; vertical-align: middle; )

Pros

  • Sadržaj može dinamički mijenjati visinu (visina nije definirana u CSS-u).
  • Sadržaj se ne reže ako za njega nema dovoljno prostora.

Protiv

  • Ne radi u IE 7 ili manjem
  • Puno ugniježđenih oznaka

2. metoda

Ova metoda koristi apsolutno pozicioniranje diva, s vrhom postavljenim na 50% i marginom na vrhu minus pola visine sadržaja. To podrazumijeva da objekt mora imati fiksnu visinu, koja je definirana u CSS stilovima.

Budući da je visina fiksna, možete postaviti overflow:auto; za div koji sadrži sadržaj, dakle, ako sadržaj ne stane, pojavit će se trake za pomicanje.

Sadržaj ovdje
#sadržaj ( položaj: apsolutni; vrh: 50%; visina: 240 px; margin-top: -120 px; /* minus pola visine */ )

Pros

  • Radi u svim preglednicima.
  • Nema nepotrebnog gniježđenja.

Protiv

  • Kada nema dovoljno prostora, sadržaj nestaje (na primjer, div je unutar tijela, a korisnik je smanjio prozore, u kojem slučaju se trake za pomicanje neće pojaviti.

3. metoda

U ovoj metodi, omotat ćemo div sadržaja s drugim divom. Postavimo njegovu visinu na 50% (height: 50%;), a donju marginu na polovicu visine (margin-bottom:-contentheight;). Sadržaj će nestati plutajući i biti centriran.

evo sadržaja
#floater( float: lijevo; visina: 50%; margin-bottom: -120px; ) #content( jasno: oboje; visina: 240px; pozicija: relativno; )

Pros

  • Radi u svim preglednicima.
  • Kada nema dovoljno prostora (npr. kada je prozor smanjen), sadržaj nije izrezan, pojavit će se trake za pomicanje.

Protiv

  • Mogu se sjetiti samo jedne stvari: da se koristi dodatni prazan element.

4. metoda.

Ova metoda koristi svojstvo position:apsolute; za div s fiksnim dimenzijama (širina i visina). Zatim postavljamo njegove koordinate top:0; dno:0; , ali budući da ima fiksnu visinu, ne može se rastegnuti i poravnat je prema sredini. Ovo je vrlo slično dobro poznatoj metodi horizontalnog centriranja blok elementa fiksne širine (margina: 0 auto;).

Važne informacije.
#content( pozicija: apsolutna; vrh: 0; dno: 0; lijevo: 0; desno: 0; margina: auto; visina: 240px; širina: 70%; )

Pros

  • Vrlo jednostavno.

Protiv

  • Ne radi u Internet Exploreru
  • Sadržaj će biti odrezan bez traka za pomicanje ako u spremniku nema dovoljno prostora.

5. metoda

Pomoću ove metode možete centrirati jedan redak teksta. Jednostavno postavimo visinu teksta (line-height) jednaku visini elementa (height). Nakon toga, linija će biti prikazana u sredini.

Neki redak teksta
#sadržaj (visina: 100 px; visina linije: 100 px; )

Pros

  • Radi u svim preglednicima.
  • Ne odrezuje tekst ako ne stane.

Protiv

  • Radi samo s tekstom (ne radi s blok elementima).
  • Ako ima više od jednog retka teksta, izgleda jako loše.

Ova metoda je vrlo korisna za male elemente, kao što je centriranje teksta u gumbu ili tekstualnom polju.

Sada znate kako postići okomito središnje poravnanje, napravimo jednostavnu web stranicu koja će na kraju izgledati ovako:

Korak 1

Uvijek je dobro započeti sa semantičkim označavanjem. Naša stranica bit će strukturirana na sljedeći način:

  • #floater (na centar sadržaja)
  • #centred (središnji element)
    • #strana
      • #logo
      • #nav (popis
      • #sadržaj
    • #dno (za autorska prava i sve to)

    Napišimo sljedeće html oznake:

    Centrirana tvrtka

    Naslov stranice

    Holistički reinženjering outsourcinga s dodanom vrijednošću nakon suradnje usmjerene na proces i dijeljenja ideja.

    Energetski pojednostavite utjecajne tržišne niše putem omogućenih imperativa. Holistički prevladavaju vrhunske inovacije nakon uvjerljivih scenarija. Neometano rekapitulirajte visoke standarde u ljudskom kapitalu s vodećim proizvedenim proizvodima. Izrazito udružite sheme usklađene sa standardima prije robusnih vortala. Jedinstveno rekapitulirajte iskorištenu web-spremnost u odnosu na informacije izvan okvira.

    Naslov 2

    Učinkovito prihvatite prilagođenu web-spremnost umjesto procesa usmjerenih prema korisniku. Asertivno razvijajte međuplatformske imperative naspram proaktivnih tehnologija. Prikladno osnažite multidisciplinarne meta-usluge bez sučelja za cijelo poduzeće.



    Prikladno usmjerite konkurentna strateška tematska područja s fokusiranim e-tržištima. Fosfluorescentno udružite zajednice svjetske klase u odnosu na tržišta s dodanom vrijednošću. Na odgovarajući način izmislite holističke usluge prije robusnih e-usluga.

    Obavijest o autorskim pravima ide ovdje

    Korak 2

    Sada ćemo napisati najjednostavniji CSS za postavljanje elemenata na stranicu. Trebali biste spremiti ovaj kod u datoteku style.css. Na to je poveznica zapisana u html datoteci.

    Html, tijelo (margina: 0; ispuna: 0; visina: 100%; ) tijelo (pozadina: url("page_bg.jpg") 50% 50% bez ponavljanja #FC3; obitelj-fontova: Georgia, Times, serifi; ) #floater ( položaj: relativan; float: lijevo; visina: 50%; margin-bottom: -200px; širina: 1px; ) #centered ( položaj: relativan; jasno: lijevo; visina: 400px; širina: 80%; maks. -width: 800px; margin: 0 auto; border: solid #666 ) #bottom (position: absolute; bottom: 0; ) #nav (position: absolute: 0) donji dio: 20 piksela; preljev: automatski;

    Prije nego što središte sadržaja poravnamo, moramo postaviti visinu tijela i html-a na 100%. Budući da se visina izračunava bez unutarnjeg i vanjskog ispuna (padding i margina), postavili smo ih (padding) na 0 tako da nema klizača.

    #centrirana širina elementa 80%. To našu stranicu čini užom na malim ekranima, a širim na većim. većina stranica izgleda nepristojno na novim širokim monitorima u gornjem lijevom kutu. Svojstva min-width i max-width također ograničavaju našu stranicu tako da ne izgleda preširoka ili preuska. Internet Explorer ne podržava ova svojstva. Morate ga postaviti na fiksnu širinu.

    Budući da element #centered ima položaj:relativni skup, možemo koristiti apsolutno pozicioniranje elemenata unutar njega. Zatim postavite overflow:auto; za #content element, tako da se klizne trake pojavljuju ako sadržaj ne stane.

    3. korak

    Zadnje što ćemo učiniti jest dodati malo stila kako bi stranica izgledala malo privlačnije. Krenimo od jelovnika.

    #nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; boja pozadine: #e8e8e8; margina: 1px solid: ""; font-weight: bold; margina: 0 2px 0 5px; f8f8f8; border-bottom-color : #777;) #nav li a:hover::after ( margina: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

    Prva stvar koju smo učinili kako bi izbornik izgledao bolje bilo je uklanjanje grafičkih oznaka postavljanjem atributa list-style:none, a također smo postavili padding i padding, budući da se oni prema zadanim postavkama uvelike razlikuju u različitim preglednicima.

    Primijetite da smo tada naveli da veze trebaju biti prikazane kao blok elementi. Sada kada su prikazani razvučeni su cijelom širinom elementa u kojem se nalaze.

    Još jedna zanimljiva stvar koju smo koristili za izbornik su pseudoklase:prije i:poslije. Omogućuju vam da dodate nešto prije i poslije elementa. Ovo je dobar način za dodavanje ikona ili simbola, kao što je strelica na kraju svake veze. Ovaj trik ne radi u Internet Exploreru 7 i starijim.

    Korak 4

    I na kraju, ali ne manje važno, dodat ćemo nekoliko vijaka našem dizajnu za još više ljepote.

    #centered (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (font-family: Helvetica, Arial, sans- serif; težina fonta: #666; ) h1 (boja: #f93; granica-dno: 1px, razmak između slova: -0,05em; težina-font: podebljano; margin-top: 0; padding-top: 0; ) #bottom (padding: 10px; font-size: 0.7em; color: #f03; ) #logo (font-size: 2em; text-align: center; color: #999; ) #logo jak (težina fonta: normalno;) #logo span (zaslon: blok; veličina fonta: 4em; visina linije: 0,7em; boja: #666; ) p, h2, h3 (visina linije: 1,6em;) a (boja: #f03; )

    U ovim stilovima postavljamo zaobljene kutove za #centered element. U CSS3 to će učiniti svojstvo border-radius. Ovo još nije implementirano u nekim preglednicima, osim korištenja prefiksa -moz i -webkit za Mozilla Firefox i Safari/Webkit.

    Kompatibilnost

    Kao što ste vjerojatno već pogodili, glavni izvor problema s kompatibilnošću je Internet Explorer:

    • Element #floater mora imati postavljenu širinu
    • IE 6 ima dodatnu podlogu oko izbornika

    Često u praksi problem grupiranja i usklađivanja sadržaja moramo rješavati pomoću CSS-a. Danas ćemo pogledati glavne načine postavljanja elemenata u vodoravni red.

    Materijal u ovom članku namijenjen je pomoći web dizajnerima početnicima u svladavanju tehnika izgleda web stranice.

    Što odabrati ili metode

    Postoji nekoliko načina za raspored konstrukcijskih elemenata u nizu u vodoravnoj ravnini. Najkorisniji, sa stajališta praktične primjene, su:

    • Metoda "plutanja".
    • "Inline-block" metoda
    • Metoda tablica-ćelija

    Svaki od njih ima svoje prednosti, primjene i nedostatke. Pogledajmo ih redom.

    “Za iskorak” ili malo teorije

    Svi strukturni elementi HTML-a mogu se podijeliti na:

    Inline(ugrađeni) – vrsta img, raspon i slično. Nemamo mogućnost mijenjati njihovu pozadinu niti im dati proizvoljne linearne dimenzije.

    Blokirati– zauzimaju cijelu širinu nadređenog bloka, uvijek počinju u novom retku – p, h, div.

    Vizualni primjer inline i blok struktura dan je u nastavku:

    Metoda plutanja

    Kao što je već poznato (vidi gore), blok element se postavlja u novi red, bez obzira na širinu navedenu za njega ( širina). Stoga, smanjenje vodoravne veličine div-Oh, ne možete graditi blokove u nizu.

    Najpopularnija metoda rješenja (osobito među dizajnerima početnicima) je korištenje svojstva lebdjeti.

    CSS svojstvo lebdjeti stekao je veliku popularnost i praktičnu vrijednost nakon prijelaza s tabelarnog izgleda na blokovni.

    Plutanje: lijevo (desno) transformira blok element u plutajući, poravnava ga s lijevim (desnim) rubom nadređenog bloka i postavlja tekst i druge elemente za prelamanje udesno (lijevo).

    Na primjer, stvorimo četiri bloka koje je potrebno postaviti u red:

    < html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Mi gradimo < div class = "bblock" >horizontalna < div class = "bblock" >red < div class = "bblock" >od diva

    I vanjski stilski list sa sljedećim sadržajem:

    div (float: lijevo; /*Postavite omot*/ line-height: 120px; veličina fonta: 40px; }

    pozadina: dodgeblue;

    boja: bijela;

    margin-top: 60px;

    širina: 320px; /*Popravite širinu bloka*/.

    Rezultat su četiri bloka raspoređena u vodoravni red i poravnata s lijevim rubom nadređenog bloka:

    < div style= "clear: both;" >

    Ponekad je u praksi potrebno blokove poravnati s desnim rubom nadređenog elementa. Promijenimo tijek oko blokova u prethodnom primjeru: plovak: desno; Obratite pozornost na natpise koji se nalaze u blokovima. Na prvi pogled može se činiti da je primjer radio krivo. No zapravo je preglednik ispravno obradio kod: čitao je blokove od vrha prema dolje i učinio ono što smo tražili od njega - poravnao ga je udesno. Imajte ovo na umu kada koristite imovinu

    plovak: desno

    < div class = "wrap" > < div class = "bblock" >Mi gradimo < div class = "bblock" >horizontalna < div class = "bblock" >red < div class = "bblock" >od diva

    Kako biste prekinuli tijek elemenata s određenog mjesta, koristite liniju: U gore navedenom primjeru postavili smo udaljenost između blokova pomoću uvlake margin-desno . Ali što učiniti ako prilikom postavljanja stranice imate zadatak: postaviti blokove u red, centrirati ih i također imati uvlake samo između njih, ali ne i izvana? Algoritam radnji je sljedeći. /*Postavite omot*/ Omotaj (širina: 1310px; /*popravi širinu omota*/ margina: 0 auto; /*centriraj*/ pozadina: tamno siva; veličina fonta: 40px; visina: 120px; /*Postavite visinu omota*/) . bblock (float: lijevo; line-height: 120px; }

    /*Visina retka + vert. centriranje teksta*/

    veličina fonta: 40px;

    pozadina: dodgeblue;

    boja: bijela;

    širina: 320px;

    Upoznajte vrhunac programa - imanje prikaz: inline-block.

    prikaz: inline-block generira blok-linijski element, koji je u biti linijski element, ali zadržava svojstva bloka - omogućuje vam promjenu linearnih dimenzija, postavljanje margina, uvlaka itd.

    Element blok linije ima sljedeća svojstva:

    • Visina i širina bloka određuju se automatski na temelju sadržaja i vrijednosti ispune ( podstava)
    • visina i širina bloka mogu se postaviti fiksno
    • Nema efekta rušenja granica.

    Pogledajmo primjer stvaranja jednostavnog navigacijskog izbornika koji sadrži sliku i poveznicu.

    < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 1 duža je nego inače < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Veza izbornika 4

    Navigacija (prikaz: inline- blok; /*Postavi prikaz blok reda*/širina: 180px; /*postavljanje širine bloka*/ pozadina: dodgeblue; ) . string ( poravnanje teksta: središte; }

    /*Poravnajte tekst vodoravno*/

    Kao rezultat toga, dobivamo sljedeći izbornik: Kao što vidite, ispalo je malo krivo... Ali ne namjeravamo se uzrujati, pa primjenjujemo CSS svojstvo na naše divove okomito poravnati

    (vidi dolje za detalje):

    okomito poravnanje: gore;

    Naša navigacijska traka sada je poravnata s gornjim redom:

    pozadina: dodgeblue;

    • Naravno, navedeni primjer je primitivan, ali siguran sam da na temelju njega možete stvoriti pravo remek-djelo!!!

      Za starije verzije Firefoxa dodajte redak:


      prikaz: - moz- inline- stack;
    • i zamotajte element u dodatni div omotač.

      IE 7 i starije verzije - dodajte retke: zumiranje: 1 ;/*set hasLayout*/ * display: inline; /*zvjezdica – hack za IE */

    • _visina: 250 px;

    /*min-height ne radi u IE6*/

    Napominjem da određeni preglednici selektivno reagiraju na ove retke (Firefox na prve, IE na ostale).

    Metoda tablice Tablični pristup dugo je bio standard izgleda, prvenstveno zbog jednostavnosti i intuitivnosti označavanja. Najvjerojatnije je to uzrok pojavljivanja oblikovanja tablice u CSS-u. (Svojstva, prikaz: stol tablica-ćelija

    inline-table Tablični pristup dugo je bio standard izgleda, prvenstveno zbog jednostavnosti i intuitivnosti označavanja. Najvjerojatnije je to uzrok pojavljivanja oblikovanja tablice u CSS-u.), omogućuju izvođenje tabelarnog oblikovanja elemenata bez korištenja HTML tablica. Da bismo postavili blokove vodoravno, potreban nam je roditeljski element koji ima svojstvo:

    < div class = "wrap" > < div class = "bblock" >Mi gradimo < div class = "bblock" >, i podređeni elementi (ćelije) koji imaju svojstvo < div class = "bblock" >red < div class = "bblock" >od diva

    prikaz: tablica-ćelija

    pozadina: dodgeblue;

    1. Za razliku od metoda "Inline-block" i "float", kod smanjenja širine prozora web preglednika ćelije se ne pomiču prema dolje.
    2. Nemate mogućnost postavljanja svojstva margine za ćelije pseudo tablice.
    3. Kompatibilnost s različitim preglednicima. IE6, IE7 ne podržavaju svojstva iz prikaza: tablica* obitelj. Osim toga, u IE8 možete vidjeti pogrešku dinamičkog renderiranja za pseudotabularne elemente u obliku ćelija koje nasumično nedostaju. Ova se greška najčešće pojavljuje tijekom početnog crtanja dokumenta.

    Zadatak

    Poravnajte blok element zadane širine s vodoravnim središtem web stranice.

    Otopina

    Prema zadanim postavkama, širina blok elementa postavljena je na auto i obično će zauzeti cijelu dostupnu širinu. Stoga, koristeći opisanu metodu, možete centrirati samo element čija je širina izričito navedena u postocima ili pikselima. Nakon toga trebate dodati marginu stilu sloja s lijeve strane (svojstvo stila margin-left ) i s desne strane (margin-right ) s vrijednošću auto . Međutim, također možete koristiti svojstvo univerzalne margine s vrijednošću auto (primjer 1).

    Primjer 1: Poravnanje sloja prema sredini

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    Poravnavanje sloja prema sredini

    Duljina vektora preokreće pozitivni dvostruki integral.


    Rezultat primjera prikazan je na sl. 1.
 

Pročitajte:



Položaj glava na anteni

Položaj glava na anteni

U članku se otkrivaju glavne metode određivanja azimuta pomoću magnetskog kompasa i mjesta njegove moguće uporabe. Upotreba...

Kako preuzeti i konfigurirati pametnog pomoćnika za Android uređaj

Kako preuzeti i konfigurirati pametnog pomoćnika za Android uređaj

Datum ažuriranja: 2017-08-05 09:22:20 Najnovija verzija: Kompatibilnost: od android 4.0.3-4.0.4 - do android 6.0 Prava aplikacije: Promjena načina...

Opcije "Svugdje kod kuće" i "Svugdje kod kuće Rusija" MTS - opis, cijena, kako se povezati

Opcije

Rusija zauzima ogromno područje naše planete. Mnogi se Rusi suočavaju s čestim putovanjima po svojoj domovini: poslovna putovanja, putovanja...

Kako vratiti ili poništiti korisničku lozinku za Windows

Kako vratiti ili poništiti korisničku lozinku za Windows

Ako ste iznenada zaboravili lozinku za svoj Windows račun, onda vam ne preostaje ništa drugo nego potražiti način da je poništite ili postavite...
feed-image RSS