Domov › Telefon › Výškové zarovnání v html tabulce. Všechny metody vertikálního zarovnání v CSS. Příklady s vertikálním zarovnáním

Výškové zarovnání v html tabulce. Všechny metody vertikálního zarovnání v CSS. Příklady s vertikálním zarovnáním

Vlastnost CSS vertical-align je zodpovědná za vertikální zarovnání textu a obrázků na stránce. Důležitou vlastností je, že pracuje pouze s prvky tabulky, prvky inline a prvky inline-block. Podporováno všemi moderními prohlížeči.

Syntaxe CSS svislé zarovnání

... svisle zarovnat : hodnota ; ...

základní linie - zarovnání k základní linii předka (nebo jednoduše spodní hranici rodiče)
dole - zarovnat ke spodní části řádku (nebo prvku, který je umístěn pod všemi)
uprostřed – zarovná střed prvku k účaří rodiče plus polovinu jeho výšky
dílčí - zobrazení se vyskytuje pod řádkem (vypadá jako dolní index)
super - zobrazení se vyskytuje nad řádkem (jako horní index)
text-bottom - zarovná spodní okraj prvku ke spodnímu okraji řádku
text-top - zarovná horní okraj prvku k hornímu okraji řádku
top - zarovná horní okraj prvku k hornímu okraji nejvyššího prvku na řádku
dědit - zdědí hodnotu rodiče
hodnota - udává se v pixelech. Kladné číslo se posune směrem nahoru vzhledem k základní linii. Negativní dolů
úrok – udává se v procentech. Kladné číslo se posune směrem nahoru vzhledem k základní linii. Negativní dolů

Výchozí hodnota pro svislé zarovnání:

základní linie (pro vložené prvky)
střední (pro buňky tabulky)

Vertikální zarovnání v tabulkách

Nejběžnější použití vertikálního zarovnání je v buňkách tabulky. Ve štítku

použijte atribut valign.

CSS valign syntaxe pro tabulky

Kde hodnota může nabývat následujících hodnot:

baseline - zarovnání na účaří prvního řádku textu
dole - zarovnat ke spodnímu okraji buňky tabulky
uprostřed - zarovnání do středu buňky
top - zarovnat k hornímu okraji buňky

Například:

nebo

Zarovnat nahoru

Zarovnání na střed

Spodní zarovnání

Zarovnat nahoru

Zarovnání na střed

Spodní zarovnání

Příklady s vertikálním zarovnáním

Příklad 1. Hodnoty svislého zarovnání: základní, dolní, horní, dílčí

Текст с выравниванием 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

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

Uhlík

V přírodě se vyskytuje ve třech formách: uhlí, grafit a diamant.

V tomto příkladu jsou všechny parametry tabulky a buňky nastaveny prostřednictvím stylů. Výsledek příkladu je na Obr. 1.

Chcete-li nastavit zarovnání tabulky na střed webové stránky nebo podél jednoho z jejích okrajů, použijte parametr značky align

Výsledek bude patrný pouze v případě, že šířka tabulky nezabere celou dostupnou plochu, jinými slovy méně než 100 %.

Parametr align může nabývat následujících hodnot: left , right , center .
vlevo — zarovnat tabulku doleva. Tento parametr je výchozí, a proto se obvykle nezadává.
vpravo — zarovná tabulku na pravou stranu webové stránky.

na střed — zarovná tabulku na střed webové stránky.

Příklad 1 ukazuje, jak vycentrovat tabulku.

Příklad 1: Zarovnání stolu na střed

Zarovnání tabulky

Obsah tabulky

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Zarovnejte stůl na střed Ve skutečnosti zarovnání nejen nastaví zarovnání, ale také způsobí, že se obsah bude obtékat kolem tabulky na jiných stranách, podobně jako se chová značka.

. Ale od té doby

nemá parametr hspace, který určuje vodorovný okraj, pak musí být tato role přenesena na styly, zejména na atribut margin.

Příklad 1: Zarovnání stolu na střed

Zarovnání tabulky

Příklad 2 ukazuje tabulku zarovnanou vpravo a obsah omotaný kolem ní.

Příklad 2: Zarovnání tabulky doprava

Obsah, který se obtáčí kolem stolu...

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Zarovnejte stůl na pravou stranu
Aktuální příklad vytvoří tabulku se šedým pozadím a zarovnáním doprava. K rozvinutí odsazení od tabulky k obsahu použijte parametr margin s hodnotou 10 pixelů.

Chcete-li zabránit tomu, aby se tabulka obtékala, když je zarovnána podél jednoho z okrajů, nejjednodušším způsobem je přidat značku za tabulku

s daným stylem jasné: oba . Tento příkaz zakáže tok z levého i pravého okraje (příklad 3).

Zarovnání tabulky

Příklad 3: Rozbalte stůl

Balení stolu

obsah...

Zarovnání tabulky na střed se provádí stejným způsobem pomocí parametru tagu align="center".

Tabulky se často používají k návrhu rozvržení s více sloupci. Každá buňka funguje jako sloupec a výška všech sloupců bude stejná, protože buňky jsou propojeny. Ve výchozím nastavení je obsah buněk zarovnán svisle, což není vždy vhodné, zvláště pokud se obsah sousedních buněk liší objemem. V tomto případě se ukazuje, že v jednom sloupci začíná obsah od horního okraje a ve druhém uprostřed. Tuto situaci lze napravit pomocí parametru tagu valign="top".

. Příklad 1 ukazuje, jak zarovnat k hornímu okraji buňky pomocí atributu valign.

Příklad 1: Použití parametru valign

Uhlík

Styly usnadňují ovládání polohy obsahu v buňkách. Chcete-li to provést, použijte svislé zarovnání s hodnotou top a přidejte ji do voliče TD, jak je znázorněno v příkladu 2.

Příklad 2: Použití stylů

Zarovnání obsahu buňky

Uhlík

V přírodě se vyskytuje ve třech formách: uhlí, grafit a diamant. Tvoří velké množství sloučenin. Uhlík je základní složkou jakékoli organické hmoty.

V tomto příkladu jsou všechny parametry tabulky a buňky nastaveny prostřednictvím stylů. Výsledek příkladu je na Obr. 1.