Granična linija. CSS sintaksa širine granice

Nekoliko lekcija ranije, pogledali smo shematski prikaz blok web stranice, a također je ukratko govorio o takvom CSS svojstvu kao što je granica, pomoću kojeg možete postaviti granice za element. Ovaj put ćemo pobliže pogledati ovu nekretninu s primjerima.

Granica se nalazi između margine i dopuna. To znači da je marža per granica. Granica se može postaviti kako sa sve četiri strane (kao da blok zatvara u okvir), tako i sa jedne, dvije ili tri strane. U CSS-u možete kontrolirati debljinu, boju i stil ivica. Istražimo ovo detaljnije.

Border-width: širina granice

Via granična svojstva-width je širina ivice. Najčešće je ova veličina naznačena u pikselima. Možete postaviti iste ili različite širine za sve četiri ivice, na primjer:

/ * sve 4 ivice su široke 2px: * / border-width: 2px; / * gornja i donja granica su 2px, lijevo i desno su 4px: * / border-width: 2px 4px; / * gornji rub - 2px, lijevo i desno - 6px, donji - 3px: * / border-width: 2px 6px 3px; / * gornja granica - 2px, desna - 3px, donja - 4px, lijeva - 5px: * / granica-širina: 2px 3px 4px 5px;

Osim toga, postoje ključne riječi za širinu obruba:

• tanka - granica 2px;
• srednja - ivica širine 4px;
• debljina - 6px ivica.

Boja ivice: boja ivice

Svojstvo border-color postavlja boju za ivice. Boje se mogu specificirati u bilo kojem CSS formatu: ključne riječi, heksadecimalni ili RGB - što vam najviše odgovara. Po analogiji s prethodnim svojstvom, možete postaviti ili jednu boju za sve ivice ili odabrati različite boje za svaku ivicu.

Boja ivice: # FFFF00;

Također možete podesiti transparentna boja pisanjem:

Boja ivice: prozirna;

Border-style: stil ivice

Zahvaljujući svojstvu u stilu obruba, možete napraviti tačkastu, dvostruku, trodimenzionalnu ivicu od pravilne ivice - postoji mnogo različita značenja... Da biste to učinili, koristite sljedeće ključne riječi:

• čvrsta - čvrsta ivica;
• dotted - tačkasta granica;
• isprekidana - isprekidana granica;
• duplo - dvostruka granica;
• žljeb - volumetrijski žljeb granica;
• greben - volumetrijska granica s debelim rubom (u stvari, obrnuto od prethodnog stila);
• početak - ekstrudirana granica;
• umetnuti - uvučena ivica (u suštini inverzna od prethodnog stila).

Kao i kod svojstava granice širine i boje ivice, možete posebno stilizirati svaki rub bloka — na primjer, možete napraviti isprekidane gornje i donje granice, a desni i lijevi ivica udvostručena. Ovdje sve ovisi samo o mašti.

Stil obruba: dvostruko isprekidan;

Bilješka: v različitim pretraživačima izgled granica može biti malo drugačiji.

Zajedničko svojstvo CSS granice: 3 u 1

Ne morate naizmjence koristiti sva tri gore navedena svojstva da biste stilizirali ivicu. Dovoljno je znati o generalu univerzalno vlasništvo border CSS, koji će vam pomoći da stilizujete mnogo brže i uštedite prostor. Za ovo u slučajni redosled zapišite vrijednosti za sva tri svojstva:

Ivica: 2px tačkasta # FF0000;

Granice za pojedinačne strane

Sa dodatnim svojstvima obruba u CSS-u, možete stilizirati svaki obrub bloka pojedinačno. Oni će vam pomoći u tome. sljedeća svojstva:

• border-top - stil za gornju ivicu;
• border-right - za desnu granicu;
• border-bottom - za donju ivicu;
• border-left je za lijevu granicu.

border-top: 2px solid # 0000FF; border-bottom: 7px duplo # 000080;

Ishodi

Sada kada znate kako nacrtati granice bloka, možete vježbati da ih kreirate. Postoji mnogo načina da se sažeto opiše stil bez previše redaka CSS fajl... Važnu ulogu ovdje igra poznavanje principa kaskadnih stilskih listova. Pogledajmo primjer.

Recimo da želite da uokvirite div sa tri čvrste sive granice, a donju ivicu napravite isprekidanom zelenom. Ovaj stil možete napisati ovako:

Div (border-desno: 8px duplo # FF0000; ivica-lijevo: 8px duplo # FF0000; obrub-dolje: 8px duplo # FF0000; ivica-gore: 4px točkasto # FDD201;)

Ali ovo je predugačak unos. Sve ovo se može ukratko napisati:

Div (obrub: 8px duplo # FF0000; ivica-vrh: 4px s tačkama # FDD201;)

Kao što je gore spomenuto, ovdje ćemo iskoristiti prednosti CSS kaskadnih svojstava. Prvo pišemo stil za sve četiri strane ivice, a zatim specificiramo stil posebno za donju ivicu, čime se djelimično prepisuje prethodni stil. Veoma je važno pratiti ovaj niz redova.

Mini zadatak

Pokušajte napraviti ivicu za div dimenzija 200x200px. Stilovi za obrub bi trebali biti sljedeći:

• Neka gornje i donje ivice budu čvrste solidan, dajte im istu boju po izboru i širinu od 5 piksela.
• Napravite lijevu ivicu isprekidano, širine 3 piksela, odaberite drugu boju od prethodne.
• Udvostručite desnu ivicu duplo, širine 7 piksela, različite boje od prethodne dvije.

Na kraju, vaš rad bi trebao izgledati ovako (osim boje koju sami odaberete):

Rezultat zadatka (pogledajte u Chromeu)

Svojstvo CSS granice pseudonime za kreiranje ivice objekta, odnosno debljine ivice, njene boje i stila. Ovo svojstvo se široko koristi u HTML-u. Možete kreirati razne efekte za bolju percepciju sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje stranice, meni itd.

1. CSS granična sintaksa

granica: granica-širina border-style boja granice | nasljediti;

• border-width - debljina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanak, srednji, debeli (razlikuju se samo po širini u pikselima)
• border-style - stil prikazane ivice. Može poprimiti sljedeće vrijednosti
  • ništa ili skriveno - poništava granicu
  • tačkasti - tačkasti okvir
  • isprekidani - okvir crtice
  • puna - jednostavna linija (najčešće se koristi)
  • duplo - duplo rub
  • žljeb - 3D žljebljeni rub
  • greben, umetak, početak - razni efekti 3D okvira
  • naslijediti - primjenjuje se vrijednost roditeljskog elementa
• border-color - boja granice. Može se podesiti sa specifično ime boje ili u RGB format(pogledajte nazive html boja za stranicu)

Bilješka

Vrijednosti u svojstvu CSS granice mogu se specificirati bilo kojim redoslijedom. Najčešće korištena sekvenca je "boja u stilu debljine".

2. Primjeri s različitim CSS granicama

2.1. Primjer. Različiti stilovi obruba u bordurnom stilu

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

V ovaj primjer oko bloka je dodat dvostruki okvir. Rezultat je prikazan na sl. 2.

Rice. 2. Primjena svojstva granice

Objektni model

Objekt.style.border

Bilješka

Pretraživač Internet Explorer do šeste verzije, sa debljinom ivice od 1px, prikazuje se tačkasto kao isprekidano. Ako je debljina 2px ili više, isprekidana vrijednost radi ispravno. Ova greška je ispravljena u IE7, ali samo za sve ivice od 1px. Ako je jedna od ivica okvira debela 2px ili više, tada u IE7 tačkasta vrijednost postaje isprekidana.

Stil ivice se može neznatno razlikovati između pretraživača kada se koriste vrijednosti utora, grebena, umetka ili izlaza.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka - Ovu specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka ) - grupa odgovorna za standard je zadovoljna da je u skladu sa njegovim ciljevima, ali je za implementaciju standarda potrebna pomoć zajednice programera.
• Predložena preporuka ( Predložena preporuka) - U ovom trenutku, dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt – zrelija verzija nacrta nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon uređivanja od strane urednika projekta.
• Nacrt ( Nacrt specifikacije) je prvi nacrt standarda.

×

Siguran sam da ste već upoznati sa svojstvom css granice. Učite li nešto novo što prije niste znali o css granicama? Pa, ne samo da ćete naučiti, već ćete vidjeti i neke nove stvari koje nikada prije niste znali!

Ne samo da se CSS3 može koristiti za zaokruživanje uglova, već se i čisti CSS kod može koristiti za kreiranje složenih oblika... U prošlosti ste mogli koristiti pozadinsku sliku da biste ostavili utisak zaobljenih uglova. Zahvaljujući novim tehnikama za korištenje granica, možemo to učiniti u čistom css kodu.

Osnove korištenja css granica

Sigurno ste već upoznati standardna upotreba svojstva granica:

Ivica: 1px puna crna;

Kod iznad će prikazati ivicu od 1px, koja će biti crna. Jednostavno i lako. Također možete malo proširiti sintaksu:

Širina ivice: debela; obrubni stil: čvrst; boja obruba: crna;

Osim toga, možete koristiti specifične vrijednosti svojstva granice širine, tri ključne riječi a: tanak, srednji, debeo.

Ali korištenje proširene sintakse nije uvijek praktično. Pogledajmo primjer kada trebate promijeniti boju ivice okvira pri lebdenju mišem. U ovom slučaju, korištenje sintakse stenograma je mnogo lakše:

Kutija (ivica: 1px puna crvena;) .kutija: lebdeći (obrub: 1px puna zelena;)

Elegantnije i jednostavnije se može učiniti na sljedeći način:

Box (bord: 1px puna crvena;) .box: lebdeći (border-boja: zelena;)

Kao što vidite, napredna tehnika je korisna i kada mijenjamo samo neka svojstva: širinu, stil, boju i druge.

Border-Radius

granica-radijus je "zlatno" svojstvo CSS3 - prvo i najčešće svojstvo koje je postalo praktično i korisno. Osim IE8 i starijih, svi pretraživači prikazuju zaobljene uglove sa ovim.

Ipak, potrebno je koristiti posebne prefikse za Webkit i Mozilla da bi stil bio ispravan.

Webkit-border-radius: 10px; -moz-border-radius: 10px; radijus granice: 10px;

U današnje vrijeme možemo ukloniti posebne prefikse i koristiti standardni obrazac granica-radijus.

Još jedna prednost je što možemo koristiti posebne vrijednosti za svaku stranu bloka:

Border-top-left-radius: 20px; granica-gore-desno-radijus: 0; border-bottom-right-radius: 30px; granica-dolje-lijevo-radijus: 0;

U kodu iznad, postavljanje radijusa-gore-desno i radijusa granice-dolje-lijevo na nulu može stvoriti zadivljujuće oblike. Iako element može naslijediti neka svojstva koja će se morati vratiti na nulu.

Kao margina i padding, možemo sažimati sintaksu:

/ * na vrhu lijevo, gore desno, dolje desno, dolje lijevo * / border-radius: 20px 0 30px 0;

Kao primjer, koristeći svojstvo border-radius, pokazat ću vam "limun" koji dizajneri često koriste kada dizajniraju web stranice:

Limun (širina: 200px; visina: 200px; pozadina: # F5F240; ivica: 1px čvrsta # F0D900; granica-radijus: 10px 150px 30px 150px;)

Ići dalje od osnova

Kod mnogih dizajnera, svo znanje u oblasti css svojstava granice tu se završava. Ali ima ih još nekoliko cool stvari sa kojim možete kreirati neverovatne stvari!

Složene css granične strukture

Postoje mnoge tehnike za kreiranje dizajna koristeći složene granične strukture. Na primjer, pogledajmo sljedeće...

Border-Style

Uvijek koristimo dobro poznata svojstva pune, isprekidane i tačkaste. Ali postoji nekoliko drugih svojstava u stilu granice: žlijeb i greben.

Bord: 20px žlijeb # e3e3e3;

Ili u proširenoj sintaksi:

Border-color: # e3e3e3; granica širine: 20px; rubni stil: žljeb;

Iako su ova svojstva korisna, ona nisu osnova za složene okvire.

Outline

Najpopularnija tehnika za kreiranje dvostruke granice je korištenje svojstva outline.

Kutija (obrub: 5px čvrsta # 292929; obris: 5px čvrsta # e3e3e3;)

Ova metoda odlično funkcionira, iako nas ograničava na samo dvije kutije. Ponekad trebate kreirati granicu gradijenta koja se sastoji od mnogo slojeva... kako onda?

Pseudoelementi

Kada Outline tehnika nije dovoljna alternativnim sredstvima je korištenje pseudo elemenata: prije i: poslije. Pomoću kojih elementu možete dodati dodatne okvire:

Kutija (širina: 200px; visina: 200px; pozadina: # e3e3e3; pozicija: relativna; ivica: 10px čvrsto zelena;) / * Kreirajte dva okvira sa ista širina kontejnera * / .box: poslije, .box: prije (sadržaj: ""; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0;) .box: poslije (obrub: 5px puna crvena; obris: 5px puna žuta;) .kutija: prije (ivica: 10px puna plava;)

Ne baš elegantnog izgleda, ali najmanje, radi. Malo je problematično razumjeti redoslijed boja unutar okvira... ali možete razumjeti.

Box-Shadow

Zanimljiv "djetinjast način" za stvaranje ovog efekta je korištenje svojstva CSS3 box-shadow:

Kutija (ivica: 5px puna crvena; sjena okvira: 0 0 0 5px zelena, 0 0 0 10px žuta, 0 0 0 15px narandžasta;)

U ovom slučaju, bili smo pametniji, koristeći posebno dizajnirano svojstvo senke kutije. Promjenom parametara x, y, zamućenja na "nulu", možemo koristiti različite boje za kreiranje mnogo okvira.

Ali postoji problem, u starijim pretraživačima koji ne razumiju svojstva box-shadow, bit će vidljiv samo jedan crveni okvir od 5px.

“Zapamti! Dizajn web stranice treba da izgleda unakrsno, odnosno isto u svim pretraživačima. Uključujući stare verzije."

Promjena uglova

Pored polovnih jednostavno značenje border-radius, možemo specificirati dva odvojena - odvajajući ih sa / odredićemo horizontalni i vertikalni radijus.

Na primjer:

Border-radijus: 50px / 100px; / * horizontalni radijus, vertikalni radijus * /

... to je isto kao:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Ova tehnika je prikladna za stvaranje jedinstvenih oblika blokova. Na primjer, evo kako stvoriti efekt umotanog papira:

Kutija (širina: 200px; visina: 200px; pozadina: # 666; radijus-gore-levo: 15em 1em; radijus-dole-desno: 15em 1em;)

CSS oblici koji koriste obrub

Ova tehnika pokazuje kako možete kreirati css forme, koristeći elemente sa nultim dimenzijama visine i širine. Jeste li iznenađeni? Pogledajmo primjer...

Za sljedećih nekoliko primjera koristit ćemo sljedeće oznake:

... i sljedeći osnovni stil:

Kutija (širina: 200px; visina: 200px; pozadina: crna;)

Većina čest primjer koristeći CSS oblici - stvaranje strelice koja teče. Tajna iza ove strelice je u stvaranju granice različite boje za svaku stranu. Zatim postavite atribute širine i visine na 0.

Dodijeli div blok klasa strelice:

Strelica (širina: 0; visina: 0; ivica-vrh: 100px puna crvena; ivica-desno: 100px puna zelena; ivica-donja: 100px puna plava; ivica-lijevo: 100px puna žuta;)

Da bismo demonstrirali, prvo koristimo proširenu sintaksu. Dalje, možemo ukloniti dodatni kod koristeći skraćenu sintaksu:

Strelica (širina: 0; visina: 0; ivica: 100px puna; boja ivice: crvena zelena plava žuta;)

Zanimljivo, zar ne? Sada ćemo postaviti transparentne boje na sve strane osim na plavu stranu.

Strelica (širina: 0; visina: 0; ivica: 100px puna; boja ivice dna: plava;)

Ispalo je odlično! Ali to je u suprotnosti semantički raspored, kreirajte .arrow div, samo da dodate strelicu na stranicu. U tu svrhu možemo koristiti pseudoelemente, što ćemo sada i učiniti.

Kreirajte govorni balon

Da bismo kreirali oblačić govora, potreban nam je mali komad čisti CSS kod i jedan div blok.

Oblačić govora (položaj: relativan; boja pozadine: # 292929; širina: 200px; visina: 150px; visina linije: 150px; / * okomito središte * / boja: bijela; poravnanje teksta: centar;)

Oblačić: poslije (sadržaj: "";)

U ovoj fazi ćemo kreirati strelicu koju smo radili ranije, dodati je elementu i sve što ostaje je pozicioniranje:

Oblačić: poslije (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 10px puna; boja ivice: crvena zelena plava žuta;)

Ako želimo da strelica pokazuje prema dolje, morat ćemo postaviti sve ivice na transparentne osim gornje.

Govorni oblačić: poslije (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 10px čvrsta; ivica-top-boja: crvena;)

Kada kreiramo ovo CSS oblik, ne možemo konkretno odrediti veličinu strelice. Umjesto toga, možemo postaviti svojstvo border-width, koje će postaviti veličinu za strelicu. Također ćemo postaviti poziciju strelice u donjem dijelu sredine. U skladu s tim, za to koristimo vrijednosti top i left.

Govorni oblačić: poslije (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 15px čvrsta; ivica-top-boja: crvena; vrh: 100%; lijevo: 50%;)

Osim toga, ostaje nam da damo boju istu kao i blok. Zapamtite, prilikom pozicioniranja morate uzeti u obzir veličinu drugih okvira koji su nevidljivi (15px). Također ćemo bloku dati zaobljene uglove.

Speech-bubble (/ *… ostali stilovi * / border-radius: 10px;) .speech-bubble: after (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; granica: 15px čvrsta; granica-vrh -boja: # 292929; vrh: 100%; lijevo: 50%; margina lijevo: -15px; / * prilagodi širinu ivice * /)

Nije loše, ha? Koristeći nekoliko css klasa i podešavanja granica, možete kreirati takvu stvar.

/ * Upotreba oblačića govora: Primijenite klasu.speech-bubble i.speech-bubble-DIRECTION kao što je prikazano ispod

* / .speech-bubble (položaj: relativan; boja pozadine: # 292929; širina: 200px; visina: 150px; visina linije: 150px; / * okomito centar * / boja: bijela; poravnanje teksta: centar; granica- radijus: 10px; font-family: sans-serif;) .speech-bubble: nakon (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; granica: 15px čvrsta;) / * Postavite strelicu * / .speech-bubble-top: after (border-bottom-color: # 292929; lijevo: 50%; bottom: 100%; margin-left: -15px;) .speech-bubble-right: after (border-left-color : # 292929; lijevo: 100%; gore: 50%; margin-top: -15px;) .speech-bubble-bottom: poslije (border-top-color: # 292929; vrh: 100%; lijevo: 50%; margin-left: -15px;) .speech-bubble-left: after (border-right-color: # 292929; vrh: 50%; desno: 100%; margin-top: -15px;)

Bonus! Centriranje okomito unutar bloka

Za jedan red teksta možete koristiti visinu reda. Ali ako imate dva ili više linija tekst... Najbolje rješenjeće postaviti svojstvo prikaza na tabelu i staviti sav tekst u pasus. Ovako to izgleda html markup: