.

Atribut poravnave je precej vsestranski in ga je mogoče uporabiti ne le za telo besedila, ampak tudi za naslove, kot je

. Primer 1 prikazuje, kako v takem primeru nastaviti poravnavo.

Primer 1: Poravnava besedila

Kako ujeti leva?

metoda štetja

Puščavo razdelimo na več elementarnih delov, katerih velikost sovpada s splošnimi dimenzijami leva, vendar je manjša od velikosti kletke. Nato s preprostim naštevanjem določimo območje, v katerem se lev nahaja, kar samodejno vodi do njegovega ujetja.

metoda dihotomije

Puščavo razdelimo na dve polovici. V enem delu je lev, v drugem pa ga ni. Vzamemo polovico, v kateri se nahaja lev, in jo ponovno razdelimo na pol. Tako ponavljamo, dokler leva ne ujamemo.

Rezultat primera je prikazan na sl. eno.

riž. 1. Poravnajte besedilo na desno in levo

V tem primeru je naslov poravnan na sredino okna brskalnika, izbrani odstavek je poravnan desno, telo besedila pa je poravnano levo.

Oznake HTML, ki določajo poravnavo besedila, zamik

Upoštevano besedilo, uporabljeno v tipografiji

Spodnji primer prikazuje, kako poravnati besedilo v širino strani:

poravnaj="levo"	poravnaj="desno"
	Vsak dan raste število delavcev, zaposlenih v storitvenem sektorju in širjenju informacij. Če sta bila simbola preteklih stoletij kmetija in tovarna, je simbol sedanjega 21. stoletja pisarna, opremljena z računalniki, ki imajo dostop do pretoka informacij.
align="upraviči"	align="center"
Vsak dan raste število delavcev, zaposlenih v storitvenem sektorju in širjenju informacij. Če sta bila simbola preteklih stoletij kmetija in tovarna, je simbol sedanjega 21. stoletja pisarna, opremljena z računalniki, ki imajo dostop do pretoka informacij.	Vsak dan raste število delavcev, zaposlenih v storitvenem sektorju in širjenju informacij. Če sta bila simbola preteklih stoletij kmetija in tovarna, je simbol sedanjega 21. stoletja pisarna, opremljena z računalniki, ki imajo dostop do pretoka informacij.

Upravičena vrednost zagotavlja enotnost poravnava besedila desno in levo, to je v širino. Ta metoda se pogosto uporablja v tisku.

Poravnava besedila v HTML na sredino in poravnano

Poravnajte besedilo v HTML na sredino, besedilo na desno:

rezultat:

Atributi in vrednosti

• align="left" - definira levo poravnavo besedila(privzeto).
• align="center" - poravna besedilo na sredino.
• poravnaj="desno" poravna besedilo na desno.

Poravnava | Zamik besedila HTML

Besedilo HTML in njegov zamik na levi strani

Izdelujmo zamik besedila na levi na dva načina:

rezultat:

Poglej v novem oknu.

Zdravo! Nadaljujemo z osvajanjem osnov jezika HTML. Poglejmo, kaj morate napisati, da poravnate besedilo na sredino, širino ali robove.

Če se lotimo posla, poglejmo, kako sredinsko besedilo v HTML na tri različne načine. Zadnja dva sta neposredno povezana s slogovnim listom. Lahko je datoteka CSS, ki je povezana s stranmi spletnega mesta in nastavi njihov videz.

1. način - delo neposredno s HTML

Pravzaprav je vse precej preprosto. Glej primer spodaj.

Poravnajte odstavek na sredino.

Če želite fragmente besedila premakniti na drugačen način, potem namesto parametra »center« vnesite naslednje vrednosti:

• poravnati - poravnati besedilo na širino strani;
• desno - na desnem robu;
• levo - na levi.

Po analogiji lahko premaknete vsebino, ki je v glavah (h1, h2), vsebniku (div).

Metoda 2 in 3 - uporaba slogov

Zgoraj predstavljeno zasnovo je mogoče nekoliko spremeniti. Učinek bo enak. Če želite to narediti, morate napisati spodnjo kodo.

Besedilni blok.

V tej obliki je koda zapisana neposredno v HTML za centriranje besedilne vsebine.

Obstaja še en alternativni način za dosego rezultata. Narediti boste morali nekaj stvari.

Korak 1. V glavno kodo napišite

Besedilno gradivo.

2. korak. V priloženo datoteko CSS vnesite to kodo:

Rovno (text-align:center;)

Opažam, da je beseda "rovno" samo ime razreda, ki se lahko imenuje drugače. To je prepuščeno programerjevi presoji.

Po analogiji lahko v HTML besedilo enostavno centrirate, poravnate in poravnate na desno ali levo stran. Kot lahko vidite, še zdaleč ni ene možnosti za dosego cilja.

Samo nekaj vprašanj:

• Ali delate informativni nekomercialni projekt?
• Ali želite, da se vaša stran dobro uvršča v iskalnikih?
• Ali želite zaslužiti na spletu?

Če so vsi odgovori pozitivni, si oglejte le celostni pristop k razvoju spletnih strani. Informacije bodo še posebej koristne, če bodo delovale na WordPress CMS.

Rad bi opozoril, da so lastna spletna mesta le ena od mnogih možnosti za ustvarjanje pasivnega ali aktivnega dohodka na internetu. Moj blog govori samo o finančnih priložnostih na internetu.

Ste že kdaj delali na področju prometne arbitraže, pisanja besedil in drugih dejavnosti, ki prinašajo glavni ali dodatni zaslužek s sodelovanjem na daljavo? O tem in še veliko več lahko izveste zdaj na straneh mojega bloga.

Vnaprej bom objavil veliko res koristnih informacij. Ostati v stiku. Če želite, se lahko naročite na posodobitve Workip po e-pošti. Obrazec za prijavo se nahaja spodaj.

Pri postavljanju strani je pogosto treba izvesti sredinsko poravnavo na način CSS: na primer centrirati glavni blok. Obstaja več možnosti za rešitev te težave, od katerih mora vsak oblikovalec postavitve prej ali slej uporabiti vsako.

Sredinska poravnava besedila

Pogosto želite za dekorativne namene nastaviti poravnavo besedila na sredino, CSS vam v tem primeru omogoča, da skrajšate čas postavitve. Prej se je to izvajalo z atributi HTML, zdaj pa standard zahteva, da je besedilo poravnano s slogovnimi listami. Za razliko od blokov, ki morajo spremeniti robove, je v CSS poravnava besedila centrirana z eno vrstico:

• poravnava besedila: sredina;

Ta lastnost se deduje in prenaša od staršev do vseh otrok. Ne vpliva le na besedilo, ampak tudi na druge elemente. Če želite to narediti, morajo biti v vrstici (na primer razpon) ali v vrstici (kateri koli blok, ki ima nastavljeno lastnost display: block). Slednja možnost vam omogoča tudi spreminjanje širine in višine elementa, bolj prilagodljivo prilagajanje alinej.

Na straneh je poravnava pogosto pripisana sami oznaki. To takoj naredi kodo neveljavno, saj je W3C opustil atribut poravnave. Uporaba na strani ni priporočljiva.

Poravnava bloka na sredino

Če morate div postaviti na sredino, ima CSS precej priročen način: uporabo robov. Zamike je mogoče nastaviti tako za elemente blokov kot za elemente blokov v vrstici. Vrednost lastnosti mora imeti vrednosti 0 (navpične zamike) in auto (samodejne vodoravne zamike):

• margin:0 auto;

Zdaj je ta možnost priznana kot popolnoma veljavna. Uporaba robov vam omogoča tudi nastavitev poravnave slike na sredino: omogoča vam reševanje številnih težav, povezanih s pozicioniranjem elementa na strani.

Poravnajte blok levo ali desno

Včasih centriranje na način CSS ni potrebno, vendar morate postaviti dva bloka enega poleg drugega: enega na levi rob, drugega na desni. Za to obstaja lastnost float, ki ima lahko eno od treh vrednosti: levo, desno ali nič. Recimo, da imate dva bloka, ki ju je treba postaviti drug poleg drugega. Potem bo koda takšna:

• .left (float:left;)
• .right(float:desno)

Če obstaja še tretji blok, ki naj se nahaja pod prvima dvema blokoma (na primer noga), potem mora nastaviti lastnost clear:

• .left (float:left;)
• .right(float:desno)
• noga (počisti:obe)

Dejstvo je, da bloki z razredi levo in desno izpadejo iz splošnega toka, to pomeni, da vsi drugi elementi ignorirajo sam obstoj poravnanih elementov. Lastnost clear:both omogoča nogi ali kateremu koli drugemu bloku, da vidi elemente, ki so izpadli iz toka, in onemogoča ovijanje (lebdenje) tako v levo kot v desno. Zato se bo v našem primeru noga premaknila navzdol.

Navpična poravnava

Obstajajo primeri, ko ni dovolj, da nastavite sredinsko poravnavo na načine CSS, morate spremeniti tudi navpični položaj podrejenega bloka. Vsak element v vrstici ali bloku v vrstici je lahko poravnan z zgornjim ali spodnjim robom, na sredini nadrejenega elementa ali v poljubnem položaju. Najpogosteje je treba blok centrirati, kar se naredi z atributom vertical-align. Recimo, da obstajata dva bloka, eden ugnezden v drugem. V tem primeru je notranji blok element inline-block (prikaz: inline-block). Podrejeni blok morate poravnati navpično:

• zgornja poravnava - .child(vertical-align:top);
• sredinska poravnava - .child(vertical-align:middle);
• spodnja poravnava - .child(vertical-align:bottom);

Poravnava besedila ali navpična poravnava ne vpliva na elemente na ravni bloka.

Možne težave z poravnanimi bloki

Včasih lahko centriranje diva na način CSS povzroči majhne težave. Na primer, ko uporabljate float: recimo, da obstajajo trije bloki: .first, .second in .third. Drugi in tretji blok ležita v prvem. Element z razredom second je poravnan levo, zadnji blok pa desno. Po poravnavi sta oba padla iz potoka. Če nadrejeni element nima nastavljene višine (na primer 30 em), se ne bo več raztegnil do višine podrejenih blokov. Da bi se izognili tej napaki, uporabljajo "distančnik" - poseben blok, ki vidi .second in .third. Koda CSS:

• .second(float:left)
• .third(float:desno)
• .clearfix(height:0; clear: both;)

Pogosto se uporablja psevdorazred :after, ki vam prav tako omogoča, da bloke postavite nazaj na svoje mesto z ustvarjanjem psevdo presledka (v primeru je div z vsebniškim razredom znotraj .first in vsebuje .left in .right):

• .left(float:left)
• .right(float:desno)
• .container:after(content:""; display:table; clear:both;)

Zgornje možnosti so najpogostejše, čeprav obstaja več različic. Z eksperimentiranjem lahko vedno najdete najlažji in najbolj priročen način za ustvarjanje psevdo distančnika.

Druga težava, s katero se oblikovalci postavitve pogosto srečujejo, je poravnava elementov blokov v vrstici. Za vsakim od njih se samodejno doda presledek. Lastnost marže, ki je nastavljena na negativno maržo, pomaga pri obvladovanju tega. Obstajajo tudi drugi načini, ki se uporabljajo veliko manj pogosto: na primer ničlo. V tem primeru je velikost pisave:0 zapisana v lastnostih nadrejenega elementa. Če je znotraj blokov besedilo, je zahtevana velikost pisave že vrnjena v lastnostih elementov blokov v vrstici. Na primer, font-size:1em. Metoda ni vedno priročna, zato se veliko pogosteje uporablja možnost z zunanjimi alinejami.

Poravnava blokov vam omogoča ustvarjanje lepih in funkcionalnih strani: to je postavitev splošne postavitve, lokacija blaga v spletnih trgovinah in fotografije na spletnem mestu vizitke.

Zdi se, da ni nič težko postaviti slike ali besedila v sredino okna brskalnika. Uporabimo oznako CENTER in vse se postavi na svoje mesto, kjer smo nameravali. Vendar pa ni vse tako preprosto. Obstajajo trije načini poravnave na sredino, od katerih ima vsak svoje značilnosti in razlike v različnih brskalnikih.

Ena najpreprostejših in najbolj priročnih oznak - CENTER je zasnovana za poravnavo bloka besedila. To oznako lahko uporabite tudi za centriranje slik in tabel. Izjema so elementi oz za katere je poravnava nastavljena z lastnostmi oznake IMG. Tako, če postavimo element znotraj oznake CENTER bo slika poravnana desno.

Primer 4.1. Centriranje z oznako CENTER

To besedilo bo poravnano na sredino okna brskalnika in pod njim
risba na desni strani.

Formalno naj se CENTER uporablja samo kot parameter za druge oznake blokov (P, PRE in druge). Vendar je bil v brskalniku Netscape Navigator 2.0 CENTER predstavljen kot samostojna oznaka. Ta dodatek je bil namenjen odstranitvi dodatnega navpičnega oblazinjenja, ki se pojavi pri uporabi blokovnih oznak. Če je namesto oznake CENTER besedilo postavljeno znotraj odstavka (

) , se med vodoravno črto in tem besedilom prikaže dodatno navpično polnilo.

CENTER ni del specifikacije HTML. V "uradnem" HTML-ju mora biti oblikovanje, kot je poravnava besedila, izvedeno prek atributov oznake (na primer

) ali z uporabo slogov. Kljub temu je ta oznaka pridobila pravico do obstoja. Vendar je konzorcij od izdaje specifikacije HTML 4 W3 priporočil, da se izogiba uporabi oznake CENTER in da element

, kot je prikazano v primeru 4.2.

Primer 4.2. Centriranje z oznako DIV

---

Drug način za centriranje je uporaba slogov. Slogi so navodila, ki vam omogočajo nadzor nad atributi oblikovanja, kot so pisava, barva, poravnava itd. Primer redefiniranja oznake P v središče besedila.

Primer 4.3. Centriranje s slogi

Zdaj, ko boste uporabili oznako P z zgornjim
slogu, bo besedilo odstavka poravnano na sredino okna brskalnika