Dom › Telefon › Poravnanje visine u html tablici. Sve metode okomitog poravnanja u CSS-u. Primjeri s okomitim poravnanjima

Poravnanje visine u html tablici. Sve metode okomitog poravnanja u CSS-u. Primjeri s okomitim poravnanjima

Svojstvo CSS vertical-align odgovorno je za okomito poravnanje teksta i slika na stranici. Važna značajka je da radi samo s elementima tablice, inline i inline-block elementima. Podržavaju ga svi moderni preglednici.

CSS sintaksa okomitog poravnanja

... okomito poravnanje : vrijednost ; ...

osnovna linija - poravnanje prema osnovnoj liniji pretka (ili jednostavno donjoj granici roditelja)
bottom - poravnati na dno linije (ili element koji se nalazi ispod svih)
sredina - poravnajte središnju točku elementa s osnovnom linijom roditelja plus pola visine roditelja
sub - prikaz se nalazi ispod crte (izgleda kao indeks)
super - prikaz se pojavljuje iznad crte (kao superskript)
text-bottom - poravnajte donji rub elementa s donjim rubom linije
text-top - poravnajte gornju granicu elementa s gornjim rubom linije
vrh - poravnajte gornji rub elementa s vrhom najvišeg elementa na liniji
naslijediti - nasljeđuje vrijednost roditelja
vrijednost - naznačena u pikselima. Pozitivan broj pomiče se prema gore u odnosu na osnovnu liniju. Negativno dolje
kamata - izražena u postocima. Pozitivan broj pomiče se prema gore u odnosu na osnovnu liniju. Negativno dolje

Zadana vrijednost okomitog poravnanja:

osnovna linija (za umetnute elemente)
sredina (za ćelije tablice)

Okomito poravnanje u tablicama

Najčešća upotreba okomitog poravnanja je u ćelijama tablice. U oznaci

koristite atribut valign.

CSS valjana sintaksa za tablice

Gdje vrijednost može uzeti sljedeće vrijednosti:

osnovna linija - poravnanje s osnovnom crtom prvog retka teksta
bottom - poravnajte s donjim rubom ćelije tablice
sredina - poravnanje na sredinu ćelije
vrh - poravnajte s gornjim rubom ćelije

Na primjer:

ili

Poravnajte prema vrhu

Središnje poravnanje

Poravnanje dolje

Poravnajte prema vrhu

Središnje poravnanje

Poravnanje dolje

Primjeri s okomitim poravnanjima

Primjer 1. Vrijednosti okomitog poravnanja: osnovna linija, dno, vrh, ispod

Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Примечание

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

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

object.style.verticalAlign ="VALUE "

Поговорим о том, как выровнять текст в таблице HTML в горизонтальном и в вертикальном направлениях.

Для того, чтобы выровнять по горизонтали следует использовать CSS-свойство text-align . Ему присущи такие значения, как left , center и right .

Чтобы выровнять по вертикали необходимо применять CSS-свойство vertical-align . Ему, в свою очередь, характерны такие значения, как top , middle и bottom .

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

На практике выравнивание содержимого ячеек выглядит вот так:

Td { ... vertical-align: bottom; text-align: right; }

Результат в браузере для таблицы, которую мы создали в прошлом уроке:

Таким образом весь текст в ячейках прижался к правому нижнему углу.

Как выровнять текст в ячейке таблицы HTML

Если Вас интересует как выровнять текст в ячейке таблицы и эта ячейка конкретная, нужно задать свойство только для этой ячейки. Например, с помощью атрибута class . В таблице присваиваете ячейке класс:

... ...

А затем задаёте свойства для этого класса:

SpecialTd { ... vertical-align: bottom; text-align: right; }

Задача

Выровнять содержимое ячеек таблицы по их верхнему краю.

Решение

По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной ячейке текст начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью стилевого свойства vertical-align со значением top , добавляя его к селектору td , как показано в примере 1.

Пример 1. Применение vertical-align

HTML5 CSS 2.1 IE Cr Op Sa Fx

Выравнивание содержимого ячеек

Ugljik

U prirodi se nalazi u tri oblika: ugljen, grafit i dijamant. Tvori veliki broj spojeva. Ugljik je bitan sastojak svake organske tvari.

U ovom primjeru, svi parametri tablice i ćelije postavljeni su kroz stilove. Rezultat primjera prikazan je na sl. 1.

Da biste postavili poravnanje tablice prema sredini web stranice ili duž jednog od njezinih rubova, upotrijebite parametar oznake poravnanja

. Rezultat će biti vidljiv samo ako širina tablice ne zauzima cijelo dostupno područje, drugim riječima, manje od 100%.

Parametar align može imati sljedeće vrijednosti: lijevo, desno, središte.

lijevo — poravnajte stol ulijevo. Ovaj je parametar zadani i stoga se obično ne navodi.
desno — poravnajte tablicu na desnu stranu web stranice.
središte — poravnajte tablicu prema sredini web stranice.

Primjer 1 pokazuje kako centrirati tablicu.

Primjer 1: Poravnanje stola prema sredini

Poravnanje tablice

Sadržaj tablice

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Poravnajte stol prema sredini

Zapravo, align ne samo da postavlja poravnanje, već također uzrokuje omotavanje sadržaja oko tablice s drugih strana, slično ponašanju oznake . Ali budući da

nema parametar hspace koji određuje vodoravnu marginu, tada se ova uloga mora prenijeti na stilove, posebno atribut margine. Primjer 2 prikazuje tablicu poravnatu udesno i sadržaj omotan oko nje.

Primjer 2: Poravnanje tablice udesno

Poravnanje tablice

Sadržaj tablice

Sadržaj koji se mota oko stola...

Rezultat ovog primjera prikazan je na sl. 2.

Riža. 2. Poravnajte stol na desnu stranu

Trenutačni primjer stvara tablicu sa sivom pozadinom i desnim poravnanjem. Da biste razvili uvlake od tablice do sadržaja, koristite parametar margine s vrijednošću od 10 piksela.

Kako biste spriječili omatanje tablice kada je poravnata duž jednog od rubova, najlakši je način dodati oznaku iza tablice
uz dani stil jasno: oba . Ova naredba zabranjuje protok i s lijevog i s desnog ruba (primjer 3).

Primjer 3: Razmotajte stol

Omatanje stola

Sadržaj tablice

sadržaj...

Poravnanje tablice prema sredini vrši se na isti način, pomoću parametra oznake align="center".

, ali u ovom slučaju ne dolazi do prelamanja i sadržaj nakon tablice uvijek počinje u novom retku.

Kako poravnati sadržaj ćelija tablice prema vrhu?

Tablice se često koriste za dizajn izgleda s više stupaca. Svaka ćelija djeluje kao stupac, a visina svih stupaca bit će ista jer su ćelije međusobno povezane. Prema zadanim postavkama, sadržaj ćelija je poravnat okomito, što nije uvijek zgodno, pogotovo ako se sadržaj ćelija u blizini razlikuje u volumenu. U ovom slučaju ispada da u jednom stupcu sadržaj počinje od gornjeg ruba, au drugom u sredini. Ova se situacija može ispraviti pomoću parametra oznake valign="top".

. Primjer 1 pokazuje kako poravnati s gornjim rubom ćelije pomoću atributa valign.

Primjer 1: Korištenje parametra valign

Ugljik

Stilovi olakšavaju kontrolu položaja sadržaja u ćelijama. Da biste to učinili, primijenite okomito poravnanje s gornjom vrijednošću, dodajući je TD selektoru, kao što je prikazano u primjeru 2.

Primjer 2: Primjena stilova

Poravnavanje sadržaja ćelije

Ugljik

U prirodi se nalazi u tri oblika: ugljen, grafit i dijamant. Tvori veliki broj spojeva. Ugljik je bitan sastojak svake organske tvari.

U ovom primjeru, svi parametri tablice i ćelije postavljeni su kroz stilove. Rezultat primjera prikazan je na sl. 1.