Zdravo! Nastavimo savladati osnove HTML jezik. Hajde da vidimo šta treba da napišete da biste poravnali tekst sa središtem, širinom ili ivicama.

Prelazimo na posao, pogledajmo kako centrirati tekst u tri na različite načine. Posljednja dva su povezana direktno sa stilskom tablicom. To može biti CSS datoteka koja se povezuje sa stranicama stranice i definira njihov izgled.

Metoda 1 - direktan rad sa HTML-om

Zapravo je prilično jednostavno. Pogledajte primjer ispod.

Poravnajte pasus prema sredini.

Ako trebate premjestiti fragmente teksta na drugačiji način, tada umjesto parametra "centar" unesite sljedeće vrijednosti:

• justify – poravnati tekst sa širinom stranice;
• desno – na desnoj ivici;
• lijevo - lijevo.

Po analogiji, možete premjestiti sadržaj koji se nalazi u zaglavljima (h1, h2) i kontejneru (div).

Metoda 2 i 3 - korištenje stilova

Gore predstavljeni dizajn može se malo transformirati. Učinak će biti isti. Da biste to učinili, morate napisati kod ispod.

Blok teksta.

U ovom obliku, kod se upisuje direktno u HTML kako bi se sadržaj teksta centrirao.

Postoji još jedan alternativni način za postizanje rezultata. Morat ćete napraviti nekoliko koraka.

Korak 1. Upišite glavni kod

Tekstualni materijal.

Korak 2. U priloženu CSS datoteku unesite sljedeći kod:

Rovno (text-align:center;)

Napominjem da je riječ “rovno” samo naziv klase koja se može drugačije zvati. Ovo je ostavljeno na diskreciju programera.

Po analogiji, u HTML-u možete lako napraviti tekst centriran, poravnat i poravnat s desnom ili lijevom ivicom stranice. Kao što vidite, postoji mnogo više od jedne opcije za postizanje vašeg cilja.

Samo nekoliko pitanja:

• Radite li na informacijskom neprofitnom projektu?
• Želite li da vaša web stranica radi dobro? tražilice?
• Želite li zaraditi na internetu?

Ako su svi odgovori pozitivni, onda samo pogledajte integrirani pristup razvoju web stranica. Informacije će biti posebno korisne ako radi za CMS WordPress.

Želim da istaknem da su vaše vlastite web stranice samo jedna od mnogih opcija za generiranje pasivnog ili aktivnog prihoda na internetu. Moj blog je posvećen finansijskim mogućnostima na mreži.

Da li ste ikada radili u oblasti saobraćajne arbitraže, copywritinga ili drugih oblasti aktivnosti koje ostvaruju primarni ili dodatni prihod kroz saradnju na daljinu? O ovome i mnogo više možete saznati upravo sada na stranicama mog bloga.

U budućnosti ću ih objaviti još dosta korisne informacije. Ostanite povezani. Ako želite, možete se pretplatiti na Workip ažuriranja putem e-pošte. Obrazac za pretplatu se nalazi ispod.

Može se izvršiti horizontalno i okomito poravnavanje elemenata na razne načine. Izbor metode ovisi o vrsti elementa (blok ili inline), vrsti njegovog pozicioniranja, veličini itd.

1. Horizontalno poravnanje prema sredini bloka/stranice 1.1. Ako blok ima širinu: div ( širina: 300px; margina: 0 auto; /*centriraj element horizontalno unutar roditeljskog bloka*/)

Ako želite da poravnate umetnuti element na ovaj način, potrebno ga je postaviti na display: block;

1.2. Ako je blok ugniježđen unutar drugog bloka i nema/navedenu širinu: .wrapper (text-align: center;) 1.3. Ako je širina bloka postavljena i trebate ga popraviti u sredini roditeljskog bloka: .wrapper (pozicija: relativna; /* postavite relativno pozicioniranje za roditeljski blok tako da možemo apsolutno pozicionirati blok unutar njega * /) .box ( širina: 400px; pozicija: apsolutna ; lijevo: 50%; margin-left: -200px; /*pomaknite blok ulijevo za razmak jednaku polovini njegove širine*/ ) 1.4. Ako blokovi nemaju specificiranu širinu, možete ih centrirati koristeći roditeljski blok omotača: .wrapper (text-align: center; /*centrirati sadržaj bloka*/) .box (prikaz: inline-block; / *poređajte blokove u nizu vodoravno*/ margin-right: -0,25em; /*uklonite desnu marginu između blokova*/ ) 2. Vertikalno poravnanje 2.1. Ako tekst zauzima jedan red, na primjer, za dugmad i stavke menija: .button (visina: 50px; line-height: 50px; ) 2.2. Za vertikalno poravnanje bloka unutar roditeljskog bloka: .wrapper (pozicija: relativna;) .box (visina: 100px; pozicija: apsolutna; vrh: 50%; margina: -50px 0 0 0; ) 2.3. Vertikalno poravnanje prema vrsti tabele: .wrapper (prikaz: tabela; širina: 100%; ) .box (prikaz: ćelija-tabela; visina: 100px; poravnanje teksta: centar; vertikalno poravnanje: sredina; ) 2.4. Ako je kutiji data širina i visina i mora biti centriran na roditeljski okvir: .wrapper (pozicija: relativna; ) .box (visina: 100px; širina: 100px; pozicija: apsolutna; vrh: 0; desno: 0; dno: 0; margina: auto; Apsolutno pozicioniranje u centru stranice/bloka pomoću CSS3 transformacije:

ako su dimenzije navedene za element

div ( širina: 300px; /*postavi širinu bloka*/ visina:100px; /*postavi visinu bloka*/ transform: translate(-50%, -50%); pozicija: apsolutna; vrh: 50 % lijevo: 50% ;

ako element nema dimenzije i nije prazan

Neki tekst ovdje h1 ( margina: 0; transformacija: translate(-50%, -50%); pozicija: apsolutna; vrh: 50%; lijevo: 50%; )

2.5. Apsolutno pozicioniranje bloka

centriran na stranici

div ( širina: 500px; visina: 100px; /* ako visina nije eksplicitno postavljena, bit će 100% */ pozicija: apsolutna; vrh: 0; dno: 0; lijevo: 0; desno: 0; margina: auto ;

u centru bloka

.wrapper ( pozicija: apsolutna; ) .box ( širina: 100px; visina: 100px; /* ako visina nije eksplicitno postavljena, bit će 100% */ position: absolute; gore: 0; dolje: 0; lijevo: 0 ; desno: 0;

Posjetiocu bi trebalo biti lako da pronađe informacije koje su mu potrebne na stranici. Za to se koriste različite HTML oznake, kao i za izražavanje nekog izraza. Ovaj članak će raspravljati o nijansama rada s tablicama, posebno o njihovom poravnanju.

Osnovne suptilnosti

Prije svega, treba napomenuti da je ovo grafička forma Prezentacija podataka vam omogućava da strukturirate informacije, što uvelike olakšava njihovu asimilaciju. Gotovo svaki sadržaj može biti unutar ćelija tabele: od teksta do videa. Važno je uzeti u obzir ne samo veličinu, već i njegovu lokaciju.

Kako centrirati samu tabelu

Najčešće je potrebno rasporediti tabelu u sredinu stranice, iako je u početku pritisnuta uz lijevu stranu stranice. Da biste ga poravnali sa središtem, morate postaviti njegovo svojstvo margine na auto.

...

Ovo uzrokuje da se uvlačenje tablice automatski izračuna. Nakon toga, tabela će biti u sredini stranice.

Centralno poravnanje u ćelijama

Jednako često, trebate poravnati podatke sa središtem ćelije. Postoje tri načina za to: horizontalni, vertikalni i apsolutni. Iz njihovog imena je jasno po kojoj će se osi odvijati centriranje. U svakom slučaju, oznaka se koristi , odgovorna za određenu ćeliju u nizu. Zatim morate dodijeliti njegovim atributima valign (vertikalno) i/ili align (horizontalno) vrijednost "center", ovisno o vašem zadatku:

Tekst centriran u ćeliji

Ako želite da ovo formatiranje bude standardno za cijelu stranicu ili stranicu (kako ne biste prepisivali svaku tabelu), onda biste trebali koristiti CSS stilove. Da biste to učinili, dodajte sljedeći kod unutar oznake:

tablica ( text-align: center; // Za poravnavanje sadržaja tablice vodoravno centrirano vertical-align: middle; // Za poravnanje sadržaja tablice okomito centrirano )

Koristeći ovu metodu, također možete postaviti poravnanje za određenu ćeliju, kolonu, red ili cijelu tablicu u cjelini. Kao što vidite, svaka od metoda je vrlo jednostavna.

Ako uđete u bilo koju web stranicu kreiranu na bazi html-a, vidjet ćete određenu slojevitu strukturu. Štaviše, sa svojim izgled to će biti slično slojna torta. Ako tako mislite, onda najvjerovatnije niste jeli dugo vremena. Dakle, prvo zadovoljite svoju glad, a onda ćemo vam reći kako da centrirate div sloj na vašoj web lokaciji:

Prednosti rasporeda pomoću oznake

Postoje dvije glavne vrste strukture web stranice:

• Tabularni;
• Blokiraj.

Tabelarni raspored je bio dominantan čak i u zoru interneta. Njegove prednosti uključuju tačnost navedenog pozicioniranja. Ali, ipak, ima očigledne nedostatke. Glavni su obim koda i mala brzina preuzimanja.

Kada koristite izgled tabele, web stranica neće biti prikazana dok se potpuno ne učita. Dok se kod korištenja div blokova, elementi prikazuju odmah.

Osim velike brzine utovara, blok konstrukcija stranice omogućava vam da smanjite volumen nekoliko puta html kod. Uključujući i korištenje CSS klasa.

Međutim, tabelarni izgled treba koristiti za strukturiranje prikaza podataka na stranici. Klasičan primjer njegove upotrebe je prikaz tabela.

Konstrukcija blokova zasnovana na tagovima se takođe naziva sloj po sloj, a sami blokovi se nazivaju slojevi. To je zato što kada se koriste određene vrijednosti svojstva, one se mogu naslagati jedna na drugu, slično slojevima u Photoshopu.

Pomagala za pozicioniranje

U blok rasporedu, bolje je pozicionirati slojeve pomoću kaskadnih stilova. Glavno CSS svojstvo odgovorno za izgled je float.
Sintaksa svojstva:
float: lijevo | desno | nijedan | naslijediti
gdje:

• lijevo – poravnajte element sa lijevom ivicom ekrana. Protok oko preostalih elemenata odvija se na desnoj strani;
• desno – poravnanje desno, tok oko ostalih elemenata – lijevo;
• nema – zamotavanje nije dozvoljeno;
• inherit – nasljeđuje vrijednost roditeljskog elementa.

Pogledajmo lagani primjer pozicioniranja divova koristeći ovo svojstvo:

#left ( širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,51,102); ) #right ( širina: 200px; visina: 100px; float: desno; pozadina: rgb(0,255,153); ) Lijevi blok Desni blok

Sada ćemo pokušati koristiti isto svojstvo da pozicioniramo treći div u centru stranice. Ali, nažalost, float nema središnju vrijednost. A kada novom bloku date vrijednost poravnanja udesno ili ulijevo, on se pomiče u određenom smjeru. Stoga, sve što ostaje je postaviti float: left na sva tri bloka:

Ali ni ovo nije najbolja opcija. Kada se prozor smanji, svi slojevi se ređaju u jedan red okomito, a kada se veličina poveća, drže se za lijevu ivicu prozora. Dakle, potreban nam je bolji način da centriramo div.

Centrirajući slojevi

U sljedećem primjeru koristit ćemo sloj kontejnera u koji ćemo smjestiti preostale elemente. Ovo rješava problem pomicanja blokova jedan u odnosu na drugi kada se promijeni veličina prozora. Centriranje kontejnera u sredini se vrši postavljanjem svojstava margine na nulu za margine od gornje ivice i auto sa strane (margina: 0 auto ):

#container ( širina: 600px; margina: 0 auto; ) #left ( širina: 200px; visina: 100px; float: lijevo; pozadina: rgb(255,51,102); ) #right ( širina: 200px; visina: 100px; float : lijevo pozadina: rgb(0,255,153);

Isti primjer pokazuje kako možete centrirati div horizontalno. A ako malo uredite gornji kod, možete postići vertikalno poravnanje blokova. Da biste to učinili, samo trebate promijeniti dužinu sloja kontejnera (smanjiti ga). Odnosno, nakon uređivanja njegova css klasa bi trebala izgledati ovako:

Nakon promjene, svi blokovi će biti poređani striktno u nizu u sredini. Njihov položaj se neće promijeniti bez obzira na veličinu prozora pretraživača. Evo kako izgleda vertikalno centriranje diva:

U sljedećem primjeru, koristili smo brojna nova css svojstva za centriranje slojeva unutar kontejnera:

#kontejner ( širina: 450px; visina:150px; margina:0 auto; background-color:#66CCFF; ) #left (širina: 100px; visina: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: mid-left: 35px ) #desno (širina: 100px; visina: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( širina: 100px; visina: 100px; pozadina: rgb(255,0,0); display: inline-block; vertikalno poravnanje: sredina; margin-left: 35px; )

Kratak opis css svojstava i njihovih vrijednosti koje smo koristili u ovom primjeru da centriramo div unutar diva:

• display: inline-block – poravnava blok element u liniju i osigurava da se omota oko drugog elementa;
• vertikalno poravnanje: sredina – poravnava element u sredini u odnosu na roditelj;
• margin-left – postavlja lijevu marginu.

Kako napraviti link od sloja

Koliko god čudno zvučalo, ovo je moguće. Ponekad može biti potreban div blok kao veza tokom rasporeda razne vrste meni. Pogledajmo praktičan primjer implementacije sloja veze:

#layer1( širina: 500px; visina: 100px; pozadina: rgb(51,255,204); border:groove; ) a (prikaz: blok; poravnanje teksta: centar; visina: 100%; boja: rgb(255,0,51) ; ) Link na našu web stranicu

U ovom primjeru, koristeći line display: block, postavljamo vezu na vrijednost elementa bloka. I tako da cijela visina div bloka postane veza, postavite visinu: 100%.

Skrivanje i prikazivanje blok elemenata

Blok elementi pružaju više mogućnosti za proširenje funkcionalnosti sučelja nego zastarjeli tabelarni izgled. Često se dešava da je dizajn web stranice jedinstven i prepoznatljiv. Ali za takvu ekskluzivu morate platiti nedostatkom slobodnog prostora.

To se posebno odnosi na glavnu stranicu, na kojoj je cijena oglašavanja najviša. Stoga nastaje problem gdje "gurnuti" drugog reklamni baner. I ovdje se ne možete izvući s poravnavanjem diva sa središtem stranice!

Racionalnije rješenje je da neki blok bude skriven. Evo jednostavnog primjera takve implementacije:

#layer1( display:block; širina: 500px; visina: 100px; background: rgb(51,255,204); border:groove; ) funkcija show() ( if(layer1=="none") ( layer1="block"; ) ostalo ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Ovo je magično dugme. Klikom na njega će se sakriti ili prikazati skriveni blok.

U ovom primjeru, lokacija div blokova se ne mijenja ni na koji način. Ovdje se koristi najjednostavnija funkcija JavaScript mijenja vrijednost css svojstva prikaz nakon što se klikne na dugme (onclick događaj).

Počni