Metode za okomito središnje poravnanje u CSS-u. Centriranje diva i druge suptilnosti pozicioniranja
Često tijekom izgleda postoji potreba za vertikalnim poravnavanjem teksta u bloku. Ako to treba učiniti u ćeliji tablice, postavlja se vrijednost CSS svojstva okomitog poravnanja.
Ali postavlja se razumno pitanje: je li moguće bez tablice, bez preopterećenja izgleda stranice nepotrebnim oznakama? Odgovor je "možete", ali zbog slabe CSS podrške u MSIE pregledniku, rješenje problema za njega bit će drugačije od rješenja za druge uobičajene preglednike.
Kao primjer, razmotrite sljedeći fragment:
Neki tekst
i pokušajte okomito poravnati tekst prema sredini bloka i donjem rubu bloka.
Rješenje problema
"Ispravni" preglednici (uključujući MSIE
Većina modernih preglednika podržava CSS2.1, odnosno vrijednost ćelije tablice za svojstvo prikaza. To nam daje priliku prisiliti blok teksta da se pojavi kao ćelija tablice i, iskoristivši to, poravnati tekst okomito:
div(
prikaz: tablica-ćelija;
okomito poravnanje: sredina;
}
div(
prikaz: tablica-ćelija;
okomito poravnanje: dno;
}
Internet Explorer (do inačice 7)
Problem poravnavanja teksta s donjim rubom bloka u MSIE-u možete riješiti pomoću apsolutnog pozicioniranja (ovdje će nam trebati element niza ugrađen u blok):
div(
položaj: relativan;
}
div raspon (
prikaz: blok;
pozicija: apsolutna;
dno: 0%;
lijevo: 0%;
širina: 100%;
}
Ovaj skup pravila također funkcionira u "ispravnim" preglednicima.
Navedite svojstva
Div raspon (
prikaz: blok;
širina: 100%;
}
nisu potrebni, ali mogu biti potrebni ako, uz okomito poravnanje teksta, planirate koristiti i vodoravno poravnanje, na primjer, text-align: center ;.
Za okomito poravnavanje teksta prema središtu bloka, izvorni će fragment i dalje morati biti kompliciran - uvest ćemo još jedan element linije:
Materijal za proučavanje:
- Okomito centriranje u CSS-u (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
- Okomito centriranje pomoću CSS-a (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
- Okomito poravnanje (www.cssplay.co.uk/ie/valign.html)
- vertikalno poravnanje: sredina (cssing.org.ua/2005/07/14/vertical-align-middle/)
- Druga metoda okomitog poravnanja u CSS-u (cssing.org.ua/2007/04/26/another-css-valign-method)
Dobar dan, pretplatnici i čitatelji ove publikacije. Danas želim ići u detalje i reći vam kako centrirati tekst u CSS-u. U nekim prijašnjim člancima neizravno sam se dotakao ove teme, tako da imate neka znanja iz ovog područja.
Međutim, u ovoj ću vam publikaciji reći o svim različitim načinima poravnavanja objekata, a također ću vam objasniti kako uvući i uvući odlomke. Pa krenimo s učenjem gradiva!
HTML i njegovi potomci i poravnati
Ova metoda se gotovo nikada ne koristi, jer su je zamijenili kaskadni stilski alati. Međutim, saznanje da takva oznaka postoji neće vam škoditi.
Što se tiče provjere valjanosti (ovaj pojam je detaljno opisan u članku ""), sama html specifikacija osuđuje korištenje < centar>, budući da je za valjanost potrebno koristiti prijelaz DOCTYPE>.
Ovaj tipdopušta prolazak zabranjenih elemenata.
Sada prijeđimo na atribut uskladiti. Postavlja horizontalno poravnanje objekata na i uklapa se nakon deklaracije oznake. Obično se može koristiti za poravnavanje sadržaja ulijevo ( lijevo), uz desni rub ( pravo), centrirano ( centar) i širinom teksta ( opravdati).
U nastavku ću dati primjer u kojem ću sliku i pasus postaviti u središte.
Ovaj će sadržaj biti centriran.
Imajte na umu da za sliku atribut koji analiziramo ima malo drugačija značenja.
U primjeru koji sam koristio poravnati="sredina". Zahvaljujući tome, slika je bila poravnata tako da se rečenica nalazi jasno u sredini slike.
Alati za centriranje u cssu
CSS svojstva dizajnirana za poravnavanje blokova, teksta i grafičkog sadržaja koriste se mnogo češće. To je prvenstveno zbog pogodnosti i fleksibilnosti implementacije stilova.
Pa počnimo s prvim svojstvom centriranja teksta - ovo je tekst-uskladiti.
Funkcionira na isti način kao align in . Među ključnim riječima možete odabrati jednu s općeg popisa ili naslijediti karakteristike pretka ( naslijediti).
Želio bih napomenuti da u css3 možete postaviti još 2 parametra: početak– ovisno o pravilima pisanja teksta (s desna na lijevo ili obrnuto), postavlja poravnanje lijevo ili desno (slično kao kod rada lijevo ili desno) i kraj– suprotno od početka (pri pisanju teksta slijeva nadesno djeluje kao desno, pri pisanju zdesna nalijevo – lijevo).
Rečenica s desne strane
Rečenica s krajem
Reći ću vam jedan mali trik. Prilikom odabira vrijednosti opravdati zadnji redak može ružno visi odozdo. Kako biste ga, primjerice, pozicionirali u središte, možete koristiti svojstvo tekst-poravnaj-zadnji.
Da biste okomito poravnali sadržaj stranice ili ćelije tablice, koristite svojstvo okomito poravnati. U nastavku sam opisao glavne ključne riječi elementa.
| Ključna riječ | Svrha |
| Osnovna linija | Određuje poravnanje prema liniji pretka, koja se naziva bazna linija. Ako objekt predak nema takvu liniju, tada se poravnanje događa duž donje granice. |
| sredini | Sredina mutiranog objekta poravnata je s osnovnom linijom kojoj se dodaje visina nadređenog elementa. |
| dno | Dno odabranog sadržaja prilagođava se dnu objekta ispod njega. |
| vrh | Slično dnu, samo sa gornji dio objekt. |
| super | Čini znak superskriptom. |
| pod | Stvara indeks elementa. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C U E TOKODO
|
Udubljenja
I na kraju dolazimo do uvlaka pasusa. CSS jezik koristi posebno svojstvo tzv tekstualna uvlaka.
Uz njegovu pomoć možete napraviti i crvenu liniju i izbočinu (morate odrediti negativnu vrijednost).
Da biste stvorili crvenu liniju, trebate znati samo jedan parametar.
Ovo je jednostavno svojstvo uvlačenja teksta.
Mislim da su se mnogi od vas koji su se morali baviti rasporedom susreli s potrebom okomitog poravnavanja elemenata i poznaju poteškoće koje nastaju prilikom poravnavanja elementa prema sredini.
Da, u CSS-u postoji posebno svojstvo vertikalnog poravnanja s više vrijednosti za okomito poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekuje. Pokušajmo to shvatiti.
Usporedimo sljedeće pristupe. Poravnajte pomoću:
- stolovi,
- uvlačenje,
- linija-visina
- istezanje,
- negativna margina,
- transformirati
- pseudo element
- flexbox.
Postoje dva div elementa, od kojih je jedan ugniježđen u drugi. Dajmo im odgovarajuće klase – vanjske i unutarnje.
Izazov je poravnati unutarnji element sa središtem vanjskog elementa.
Prvo, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova znan. Dodajmo pravilo display: inline-block unutarnjem elementu, te text-align: center i vertical-align: middle vanjskom elementu.
Imajte na umu da se poravnanje odnosi samo na elemente koji imaju inline ili inline-block način prikaza.
Postavimo veličine blokova, kao i boje pozadine kako bismo mogli vidjeti njihove granice.
Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnavanje: sredina; boja pozadine: #ffc; ) .unutarnji (zaslon: inline-block; širina: 100px; visina: 100px; boja pozadine : #fcc; )
Nakon primjene stilova vidjet ćemo to unutarnja jedinica poravnati vodoravno, ali ne okomito:
http://jsfiddle.net/c1bgfffq/
Zašto se to dogodilo? Stvar je u tome što svojstvo vertical-align utječe na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga primjena ovog svojstva na vanjski element nije proizvela ništa. Štoviše, primjena ovog svojstva na unutarnji element također neće učiniti ništa, jer su inline-blokovi poravnati okomito u odnosu na susjedne blokove, au našem slučaju imamo jedan inline blok.
Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaku od njih.
Poravnanje pomoću tablice
Prvo rješenje koje pada na pamet je zamijeniti vanjski blok tablicom od jedne ćelije. U ovom slučaju, poravnanje će se primijeniti na sadržaj ćelije, odnosno na unutarnji blok.
http://jsfiddle.net/c1bgfffq/1/
Očigledni nedostatak ovog rješenja je da je, sa semantičkog gledišta, neispravno koristiti tablice za usklađivanje. Drugi nedostatak je da za izradu tablice trebate dodati još jedan element okolo vanjska jedinica.
Prvi minus se može djelomično ukloniti zamjenom oznaka table i td s div i postavljanjem načina prikaza tablice u CSS-u.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Međutim, vanjski blok će i dalje ostati stol sa svim posljedicama.
Poravnanje pomoću uvlake
Ako su poznate visine unutarnjeg i vanjskog bloka, tada se poravnanje može postaviti pomoću okomitih uvlaka unutarnjeg bloka pomoću formule: (H vanjski – H unutarnji) / 2.Vanjski (visina: 200px; ) .unutarnji (visina: 100px; margina: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/
Nedostatak rješenja je što je primjenjivo samo u ograničenom broju slučajeva kada su poznate visine obaju blokova.
Poravnanje pomoću visine linije
Ako znate da unutarnji blok ne smije zauzimati više od jednog retka teksta, tada možete koristiti svojstvo line-height i postaviti ga jednako visini vanjskog bloka. Budući da se sadržaj unutarnjeg bloka ne bi trebao prelamati u drugi redak, preporučuje se dodavanje pravila white-space: nowrap i overflow: hidden.Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (bjelina: nowrap; preljev: skriven;)
http://jsfiddle.net/c1bgfffq/12/
Također ovu tehniku također se može koristiti za poravnavanje višerednog teksta ako nadjačate vrijednost visine retka za unutarnji blok i također dodate display: inline-block i vertical-align: središnja pravila.
Vanjski (visina: 200px; visina linije: 200px; ) .unutarnji (visina linije: normalno; prikaz: umetnuti blok; okomito poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/
Nedostatak ove metode je da mora biti poznata visina vanjskog bloka.
Poravnanje pomoću "istezanja"
Ova metoda se može koristiti kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg bloka.Da biste to učinili potrebno vam je:
- postavite relativno pozicioniranje vanjskom bloku, a apsolutno pozicioniranje internom bloku;
- dodajte pravila top: 0 i bottom: 0 unutarnjem bloku, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
- postavite okomito ispunjavanje unutarnjeg bloka na auto.
http://jsfiddle.net/c1bgfffq/4/
Ideja koja stoji iza ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje da preglednik izračuna vertikalno ispunjavanje u jednakom omjeru ako je postavljeno na auto.
Usklađivanje s vrhom negativne margine
Ova metoda je postala široko poznata i vrlo se često koristi. Kao i prethodni, koristi se kada je visina vanjskog bloka nepoznata, ali je poznata visina unutarnjeg.Morate postaviti vanjski blok na relativno pozicioniranje, a unutarnji blok na apsolutno pozicioniranje. Zatim trebate pomaknuti unutarnji blok prema dolje za polovicu visine vanjskog vrha bloka: 50% i podići ga za polovicu vlastite visine margin-top: -H unutarnji / 2.
Vanjski (položaj: relativan; ) .unutarnji (visina: 100 px; položaj: apsolutni; vrh: 50%; margin-top: -50 px; )
http://jsfiddle.net/c1bgfffq/13/
Nedostatak ove metode je što se mora znati visina unutarnje jedinice.
Usklađivanje s transformacijom
Ova metoda je slična prethodnoj, ali se može koristiti kada je visina unutarnje jedinice nepoznata. U ovom slučaju, umjesto postavljanja negativnog ispuna piksela, možete koristiti svojstvo transformacije i pomaknuti unutarnji blok prema gore pomoću funkcije translateY i vrijednosti od -50% .Vanjski ( položaj: relativan; ) .unutarnji ( položaj: apsolutni; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Zašto je bilo nemoguće postaviti vrijednost kao postotak u prethodnoj metodi? Budući da se postotne vrijednosti margine izračunavaju u odnosu na nadređeni element, vrijednost od 50% bila bi polovica visine vanjske kutije, a morali bismo podići unutarnju kutiju na polovicu vlastite visine. Svojstvo transformacije savršeno je za to.
Nedostatak ove metode je što se ne može koristiti ako unutarnja jedinica ima apsolutno pozicioniranje.
Usklađivanje s Flexboxom
Najviše moderan način okomito poravnanje je korištenje fleksibilnog rasporeda okvira (popularno poznatog kao Flexbox). Ovaj vam modul omogućuje fleksibilnu kontrolu pozicioniranja elemenata na stranici, raspoređujući ih gotovo bilo gdje. Središnje poravnanje za Flexbox vrlo je jednostavan zadatak.Vanjski blok treba postaviti na display: flex, a unutarnji blok na margin: auto. I to je sve! Prekrasno, zar ne?
Vanjski (zaslon: savitljiv; širina: 200 piksela; visina: 200 piksela; ) .unutarnji (širina: 100 piksela; margina: automatski; )
http://jsfiddle.net/c1bgfffq/14/
Nedostatak ove metode je što Flexbox podržavaju samo moderni preglednici.
Koju metodu trebam odabrati?
Morate krenuti od izjave problema:- Za okomito poravnavanje teksta bolje je koristiti okomite uvlake ili svojstvo line-height.
- Za apsolutno pozicionirane elemente s poznatom visinom (na primjer, ikone), metoda s negativnim svojstvom margin-top je idealna.
- Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudoelement ili svojstvo transformacije.
- Pa, ako ste toliko sretni da ne trebate podržavati starije verzije IE preglednika, onda je, naravno, bolje koristiti Flexbox.
Oznake: Dodajte oznake
Web dizajneri koriste DIV-ove u svom radu svaki dan. Bez ikakvog podcjenjivanja, ovo je najpopularnija oznaka. Otvorite izvorni kod bilo kojeg web mjesta i vidjet ćete da je većina, ako ne i dvije trećine objekata zatvoreno u
Što je DIV
Ime elementa dolazi od engleska riječ divizija, što znači podjela. Prilikom pisanja markupa koristi se za rastavljanje elemenata u blokove. DIV-ovi obuhvaćaju grupe sadržaja na web stranici. Na primjer, slike, odlomci s tekstom. Oznaka ni na koji način ne utječe na prikaz sadržaja i ne nosi nikakvo semantičko opterećenje.
DIV podržava sve globalne atribute. Ali za web dizajn trebate samo dva - class i id. Svih ostalih ćete se sjetiti samo u egzotičnim slučajevima, a to nije činjenica. Atribut align, koji se koristio za centriranje ili lijevo poravnanje divova, je zastario.
Kada koristiti DIV-ove
Zamislite da je stranica hladnjak, a DIV je plastične posude, po kojem trebate sortirati sadržaj. Voće ne biste stavili u istu posudu s jetrenicom. Svaku vrstu proizvoda ćete postaviti zasebno. Web sadržaj se generira na sličan način.
Otvorite bilo koje web mjesto i podijelite ga na smislene blokove. Zaglavlje na vrhu, podnožje na dnu, glavni tekst u sredini. Sa strane se obično nalazi manji stupac s reklamnim sadržajem ili oblakom oznaka.
Sada pogledajte svaki odjeljak detaljnije. Počnite s zaglavljem. Zaglavlje stranice ima zaseban logotip, navigaciju, naslov prve razine, a ponekad i slogan. Svakom semantičkom bloku dodijelite vlastiti spremnik. To ne samo da će razdvojiti elemente u toku, već će ih i olakšati formatiranje. Bit će vam mnogo lakše centrirati objekt u DIV oznaci dajući mu klasu ili ID.
Centriranje DIV-ova pomoću margina
Prilikom renderiranja web elemenata, preglednik uzima u obzir tri svojstva: padding, margine i border. Padding je prostor između sadržaja i njegove granice. Margina - polja koja odvajaju jedan objekt od drugog. Granica je linija duž blokova. Mogu se dodijeliti svima odjednom ili samo jednoj strani:
div( border: 1px solid #333; border-left: none; )Ova svojstva dodaju prostor između objekata i pomažu vam da ih pravilno poravnate i postavite. Na primjer, ako blok sa slikom treba pomaknuti od lijevog ruba prema sredini za 20%, elementu dodijelite vrijednost lijeve margine od 20%:
Block-with-img( margin-left: 20%; )
Elementi se također mogu oblikovati korištenjem vrijednosti širine i negativnog ispuna. Na primjer, postoji blok s dimenzijama 200px x 200px. Prvo mu dodijelimo apsolutni položaj i pomaknimo ga u središte za 50%.
Div( pozicija: apsolutna; lijevo: 50%; )
Sada, kako bismo osigurali da je centrirani DIV savršeno postavljen, dajemo mu negativnu marginu ulijevo jednaku 50% njegove širine, što je -100 piksela:
Margin-lijevo: -100px;
U CSS-u se to zove "uklanjanje zraka". Ali ima značajan nedostatak u potrebi za stalnim izračunima, što je prilično teško učiniti za elemente s nekoliko razina gniježđenja. Ako su navedene vrijednosti ispune i širine obruba, preglednik će prema zadanim postavkama izračunati dimenzije spremnika kao zbroj debljine obruba, ispune s desne i lijeve strane i samog sadržaja unutra, što može također doći kao iznenađenje.
Dakle, kada trebate centrirati DIV, koristite svojstvo box-sizing s vrijednošću border-box. To će spriječiti preglednik da doda vrijednosti ispune i obruba ukupnoj širini DIV elementa. Za podizanje ili spuštanje elementa također koristite negativne vrijednosti. Ali u ovom slučaju, mogu se dodijeliti bilo gornjem ili donjem polju spremnika.
Kako centrirati DIV blok pomoću automatskih margina
Ovo je jednostavan način za centriranje velikih blokova. Jednostavno dodijelite širinu spremnika i svojstvo margine na auto. Preglednik će postaviti blok u sredinu s jednakim marginama s lijeve i desne strane, obavljajući sav posao sam. Kao rezultat toga, ne riskirate da se zbunite u matematičkim izračunima i značajno štedite svoje vrijeme.
Koristite metodu automatskog polja kada razvijate responzivne aplikacije. Glavna stvar je dodijeliti vrijednost širine spremniku u em ili postotku. Gornji primjer koda centrirat će DIV na bilo kojem uređaju, uključujući Mobiteli, zauzimat će 90% zaslona.
Poravnanje putem svojstva prikaza: inline-block
Prema zadanim postavkama, DIV elementi se smatraju blok elementima, a njihova vrijednost za prikaz je blok. Za ovu metodu morat ćete nadjačati ovo svojstvo. Prikladno samo za DIV-ove s nadređenim spremnikom:
Elementu s klasom outer-div dodijeljeno je svojstvo text-align s vrijednošću center, koja centrira tekst unutra. Ali za sada preglednik vidi ugniježđeni DIV kao blok objekt. Da bi svojstvo poravnanja teksta radilo, inner-div mora se tretirati kao mala slova. Dakle, u CSS tablicu za inner-div selektor napišete sljedeći kod:
Inner-div( display: inline-block; )
Promijenite svojstvo prikaza iz block u inline-block.
transformiraj/prevedi metodu
Kaskadni listovi stilova omogućuju pomicanje, naginjanje, rotiranje i na druge načine transformiranje web elemenata po želji. Za to se koristi svojstvo transformacije. Vrijednosti pokazuju željenu vrstu i stupanj transformacije. U u ovom primjeru radit ćemo s prijevodom:
transformiraj: prevedi (50%, 50%);Funkcija prevođenja pomiče element s njegovog trenutnog položaja lijevo/desno i gore/dolje. U zagradama se prenose dvije vrijednosti:
- stupanj horizontalnog kretanja;
- stupanj vertikalnog kretanja.
Ako se element treba pomaknuti duž samo jedne od koordinatnih osi, tada nakon riječi translate navedite naziv osi i u zagradi iznos potrebnog pomaka:
Transformacija: translateY(-20%);
U nekim priručnicima možete pronaći transformaciju s prefiksima dobavljača:
Webkit-transformacija: prevedi (50%, 50%); -ms-transformacija: prevedi (50%, 50%); transformiraj: prevedi (50%, 50%);
U 2018. to više nije potrebno; svojstvo podržavaju svi preglednici, uključujući Edge i IE.
Kako bismo centrirali DIV koji želimo, CSS translate funkcija je zapisana s vrijednošću od 50% za okomitu i vodoravnu os. To će uzrokovati da preglednik odmakne element od njegove trenutne pozicije za polovicu svoje širine i visine. Moraju se specificirati svojstva širine i visine:
Imajte na umu da se element na koji se primjenjuje svojstvo transformacije kreće neovisno o objektima koji ga okružuju. S jedne strane, to je prikladno, ali ponekad pomicanjem DIV može preklopiti drugi spremnik. Stoga se ova metoda centriranja web komponenti smatra nestandardnom i koristi se samo u slučajevima krajnje nužde. Za animaciju se koriste transformacije prema svim CSS kanonima.
Rad s Flexbox rasporedom
U obzir dolazi Flexbox na kompliciran način web izgledi. Ali ako ga svladate, shvatit ćete da je mnogo jednostavniji i ugodniji od standardne načine oblikovanje. Flexbox specifikacija je fleksibilna i nevjerojatna moćan način obrada elemenata. S na engleskom Naziv modula prevodi se kao "fleksibilni spremnik". Vrijednosti širine, visine i rasporeda elemenata podešavaju se automatski, bez izračunavanja uvlaka i margina.
U prethodnim smo primjerima već radili sa svojstvom prikaza, ali smo ga postavili na vrijednosti bloka i inline-bloka. Za izradu flex izgleda koristit ćemo display: flex. Prvo trebamo fleksibilni spremnik:
Da bismo ga pretvorili u fleksibilni spremnik u kaskadnim tablicama, pišemo:
Flex-kontejner (prikaz: flex; )
Svi ugniježđeni objekti, ali samo izravni potomci, bit će fleksibilni elementi:
Ako stavite popis unutar flex spremnika, tada se stavke li popisa ne smatraju flex elementima. Flexbox izgled će raditi samo na ul:
Pravila postavljanja savitljivih elemenata
Za upravljanje fleksibilnim stavkama potrebni su vam justify-content i align-items. Ovisno o navedene vrijednosti, ova dva svojstva automatski postavljaju objekte prema potrebi. Ako trebamo centrirati sve ugniježđene DIV-ove, pišemo justify-content: center, align-items: center i ništa više. Preglednik će sam obaviti ostatak posla:
Za centriranje teksta na DIV-ovima koji su fleksibilne stavke, možete koristiti standardnu tehniku poravnanja teksta. Ili možete učiniti svaki ugniježđeni DIV također fleksibilnim spremnikom i upravljati sadržajem koristeći justify-content. Ova je metoda mnogo racionalnija ako sadrži raznovrstan sadržaj, uključujući grafiku, druge ugniježđene objekte, uključujući popise na više razina.
Zdravo! Nastavljamo sa svladavanjem osnova HTML jezika. Da vidimo što trebate napisati da biste tekst poravnali prema sredini, širini ili rubovima.
Prelazimo na posao, pogledajmo kako centrirati tekst u tri dijela različiti putevi. Posljednja dva su izravno povezana sa stilskom tablicom. To može biti CSS datoteka koja se povezuje sa stranicama stranice i definira njihov izgled.
Metoda 1 - izravan rad s HTML-om
Zapravo je vrlo jednostavno. Pogledajte primjer u nastavku.
Poravnajte odlomak prema sredini.
Ako trebate premjestiti fragmente teksta na drugačiji način, tada umjesto parametra "centar" unesite sljedeće vrijednosti:
- justify – poravnajte tekst prema širini stranice;
- desno – na desnom rubu;
- lijevo - lijevo.
Analogno tome, možete premjestiti sadržaj koji se nalazi u zaglavljima (h1, h2) i spremniku (div).
Metoda 2 i 3 - korištenje stilova
Gore prikazani dizajn može se malo transformirati. Učinak će biti isti. Da biste to učinili, morate napisati kod u nastavku.
Blok teksta.
U ovom obliku, kod je zapisan izravno u HTML za centriranje tekstualnog sadržaja.
Postoji još jedan alternativni način za postizanje rezultata. Morat ćete napraviti nekoliko koraka.
Korak 1. U glavnom kodu upišite
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 volju programera.
Analogno tome, u HTML-u možete jednostavno postaviti tekst centriran, poravnat i poravnat na desni ili lijevi rub stranice. Kao što vidite, postoji daleko više od jedne opcije za postizanje vašeg cilja.
Samo nekoliko pitanja:
- Radite li informacijski neprofitni projekt?
- Želite li da vaša web stranica bude dobro rangirana u tražilicama?
- Želite li zaraditi online?
Ako su svi odgovori pozitivni, pogledajte samo integrirani pristup razvoju web stranice. Informacije će biti posebno korisne ako radi na WordPress CMS-u.
Napominjem da su vaše vlastite web stranice samo jedna od mnogih opcija za ostvarivanje pasivne ili aktivne zarade na internetu. Moj je blog posvećen financijskim mogućnostima na internetu.
Jeste li ikada radili u području prometne arbitraže, copywritinga i drugih područja djelovanja koja donose glavne ili dodatni prihod tijekom daljinske suradnje? O ovome i još mnogo toga možete saznati upravo sada na stranicama mog bloga.
Objavit ću ih još dosta u budućnosti korisna informacija. Ostati u kontaktu. Ako želite, možete se pretplatiti na ažuriranja Workipa putem e-pošte. Obrazac za pretplatu nalazi se ispod.