Выраўноўвання У вочка табліцы HTML ПА ЦЭНТРУ

За кошт таго, што змесціва вочак табліцы можна адначасова выраўноўваць па
гарызанталі і вертыкалі, пашыраюцца магчымасці па кіраванні становішчам элементаў
адносна адзін аднаго. Табліцы дазваляюць задаваць выраўноўванне малюнкаў,
тэксту, палёў формы і іншых элементаў адносна адзін аднаго і вэб-старонкі
ў цэлым. Наогул, выраўноўванне ў асноўным неабходна для ўстаноўкі глядзельнай
сувязі паміж рознымі элементамі, а таксама іх групавання.

Цэнтраванне па вертыкалі

Адным са спосабаў паказаць наведвальніку накіраванасць і назва сайта з'яўляецца
выкарыстанне сплэш-старонкі. Гэта першая старонка, на якой, як правіла,
размешчана flash-застаўка або малюнак, які выказвае галоўную ідэю сайта. Малюнак
таксама з'яўляецца і спасылкай на астатнія раздзелы сайта. Патрабуецца змясціць гэты
малюнак па цэнтры акна браўзэра па-за залежнасці ад дазволу манітора. Для
гэтай мэты можна скарыстацца табліцай з шырынёй і вышынёй роўнай 100% (прыклад 1).

Прыклад 1. Цэнтраванне малюнка



  
  Выравнивание
  
 
 
  
alt="Рецепты HTML">

У дадзеным прыкладзе выраўноўванне па гарызанталі устанаўліваецца з дапамогай параметру
align = "center" тэга ,
а па вертыкалі змесціва ячэйкі можна не Цэнтраваць, паколькі гэта становішча
зададзена па змаўчанні.

Каб вышыня табліцы ўсталёўвалася як 100%, неабходна прыбраць , код пры гэтым перастае быць валідным.

Выкарыстанне шырыні і вышыні на ўсю даступную вобласць вэб-старонкі гарантуе,
што змесціва табліцы будзе выраўноўвацца строга па цэнтры акна браўзэра, незалежна
ад яго памераў.

Выраўноўванне па гарызанталі

За кошт спалучэння атрыбутаў align (гарызантальнае
выраўноўванне) і valign (вертыкальнае выраўноўванне)
тэга , дапушчальна ўсталёўваць некалькі
відаў палажэнняў элементаў адносна адзін аднаго. На мал. 1 паказаны спосабы
выраўноўвання элементаў па гарызанталі.

Мал.  1. Выраўноўванне элементаў па гарызанталі

Мал. 1. Выраўноўванне элементаў па гарызанталі

Разгледзім некаторыя прыклады выраўноўвання тэксту паводле прыведзенага малюнку.

Чытай яшчэ:   Драйверы ЗБОРКА ДЛЯ WINDOWS 10

Выраўноўванне па верхнім боку

Для ўказанні выраўноўвання змесціва вочак па верхнім боку, для тэга
патрабуецца ўсталяваць атрыбут valign са значэннем
top (прыклад 2).

Прыклад 2. Выкарыстанне valign



 
  
  Выравнивание
 
 
  
Колонка 1 Колонка 2

У дадзеным прыкладзе характарыстыкі вочак кіруюцца з дапамогай параметраў тэга
, але таксама зручней змяняць праз стылі.
У прыватнасці, выраўноўванне ў вочках паказваецца ўласцівасцямі vertical-align
і text-align (прыклад 3).

Прыклад 3. Ужыванне стыляў для выраўноўвання



 
  
  Выравнивание
  
 
 
  
Колонка 1 Колонка 2

Для скарачэння кода ў дадзеным прыкладзе выкарыстоўваецца групаванне селектараў,
паколькі ўласцівасці vertical-align і padding
прымяняюцца адначасова да двух вочках.

Выраўноўванне па ніжнім краі робіцца аналагічна, толькі замест значэння top
выкарыстоўваецца bottom .

Выраўноўванне па цэнтры

Па змаўчанні змесціва ячэйкі выраўноўваецца па цэнтры іх вертыкалі, таму
ў выпадку рознай вышыні калонак патрабуецца задаваць выраўноўванне па верхнім боку.
Часам усё-такі трэба пакінуць зыходны спосаб выраўноўвання, напрыклад, пры размяшчэнні
формул, як паказана на мал. 2.

Мал.  2. Даданне формулы ў дакумент

Мал. 2. Даданне формулы ў дакумент

У падобным выпадку формула размяшчаецца строга па цэнтры акна браўзэра, а яе
нумар - па правым краі. Для такога размяшчэння элементаў спатрэбіцца
табліца з трыма вочкамі. Крайнія ячэйкі павінны мець аднолькавыя памеры, у
сярэдняй вочку выраўноўванне робіцца па цэнтры, а ў правай - па правым
краі (прыклад 4). Такая колькасць вочак патрабуецца для таго, каб забяспечыць
пазіцыянаванне формулы па цэнтры.

Чытай яшчэ:   ПРАГРАМА ДЛЯ КЛЮЧ АБНАЎЛЕННЕ WINDOWS 7

Прыклад 4. Выраўноўванне формулы



 
  
  Выравнивание
 
  
  
alt="Формула 18.6"> (18.6)

У дадзеным прыкладзе першая вочка табліцы пакінута пустой, яна служыць толькі для
стварэння водступу, які, дарэчы, можа быць усталяваны і з дапамогай стыляў.

Выраўноўванне элементаў формы

З дапамогай табліц зручна вызначаць становішча палёў формы, асабліва, калі яны
перамяжоўваюцца з тэкстам. Адзін з варыянтаў афармлення формы, якая прызначана
для ўводу каментара, паказаны на мал. 3.

Мал 3. Размяшчэнне палёў формы і тэксту

Мал 3. Размяшчэнне палёў формы і тэксту

Каб тэкст каля палёў формы быў выраўнаваны па правым краі, а самі элементы
формы - па левым, спатрэбіцца табліца з нябачнай мяжой і двума
калонкамі. У левай калонцы будзе размяшчацца уласна тэкст, а ў правай тэкставыя
палі (прыклад 5).

Прыклад 5. Выраўноўванне палёў формы



 
  
  Выравнивание
 
 
  
Имя
E-mail
Комментарий

У дадзеным прыкладзе, для тых вочак, дзе патрабуецца задаць выраўноўванне па правым
краі, дададзены атрыбут align = "right» .
Каб надпіс «Каментарый» размяшчалася па верхняй мяжы шматрадковага
тэксту, для адпаведнай ячэйкі усталёўваецца выраўноўванне па верхнім
краі з дапамогай атрыбуту valign .

Вертыкаль-ALIGN

інтэрнэт эксплорер хром опера сафары Firefox Android IOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

кароткая інфармацыя

Значэнне па змаўчанні базавая лінія
успадкоўваецца няма
ўжываецца Да убудаваным элементаў, ці вочках табліцы.
Спасылка на спецыфікацыю http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
Чытай яшчэ:   ЯК З WINDOWS 8 зайсці ў BIOS

версіі CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

апісанне

Выраўноўвае элемент па вертыкалі адносна свайго бацькі, навакольнага
тэксту або вочка табліцы.

сінтаксіс

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | inherit | значэнне | працэнты

значэння

базавая лінія
Выраўноўвае базавую лінію бягучага элемента па базавай лініі бацькі. Калі
бацькоўскі элемент не мае базавай лініі, то за яе прымаецца ніжняя
мяжа элемента.
дно
Выраўноўвае падстава бягучага элемента па ніжняй частцы элемента радкі,
размешчанага ніжэй за ўсіх.
сярэдні
Выраўноўванне сярэдняй пункту элемента па базавай лініі бацькі плюс палова
вышыні бацькоўскага элемента.
суб
Элемент паказваецца як падрадковы, у выглядзе ніжняга індэксу. Памер шрыфта
пры гэтым не змяняецца.
супер
Элемент паказваецца як надрадковы, у выглядзе верхняга індэкса. Памер шрыфта
застаецца ранейшым.
тэкст знізу
Ніжняя мяжа элемента выраўноўваецца па самым ніжнім краі бягучага радка.
тэкст-топ
Верхняя мяжа элемента выраўноўваецца па самаму высокаму тэкставаму элементу
бягучага радка.
топ
Выраўноўванне верхняга краю элемента па версе самага высокага элемента радка.
ўспадкаваць
Успадкоўвае значэнне з бацькоў.

У якасці значэння таксама можна выкарыстоўваць працэнты, пікселы або іншыя даступныя
адзінкі. Станоўчае лік ссоўвае элемент ўверх адносна базавай лініі,
у той час як адмоўны лік апускае яго ўніз. Пры выкарыстанні адсоткаў, адлік вядзецца ад значэння ўласцівасці line-height , пры гэтым 0% аналагічна значэнні baseline .

Для выраўноўвання па вертыкалі ў вочках табліцы прымяняюцца наступныя значэння.

базавая лінія
Выраўноўвае базавую лінію вочкі з базавай лініяй першай тэкставай радкі або іншага ўкладзенага элемента.
дно
Выраўноўвае па ніжнім краі вочка.
сярэдні
Выраўноўвае па сярэдзіне вочка.
топ
Выраўноўвае змесціва вочка па яе верхнім боку.

прыклад

HTML5 CSS2.1 І.Я. Cr Оп Са РХ



 
  
  vertical-align
 
 
  
TEX и L style="vertical-align: 5px; font-size: 0.8em">AT style="vertical-align: sub">EX

Вынік дадзенага прыкладу паказаны на мал. 1.

Прымяненне ўласцівасці vertical-align

Мал. 1. Ужыванне ўласцівасці vertical-align

аб'ектная мадэль

[Акно.] Document.getElementById ( « elementID «) .style.verticalAlign

браўзэры

Internet Explorer да версіі 7.0 ўключна не падтрымлівае значэнне inherit .

Чытай на іншых мовах

 беларускіанглійская Нямецкі іспанскі французскі італьянскі партугальская турэцкі арабская ўкраінскі шведскі венгерская балгарскі эстонскі Кітайскі (спрошчаны) в'етнамская румынская тайская славенская славацкая сербская малайская нарвежская латышская Літоўскі карэйская японскі інданезійская хіндзі іўрыт фінскі грэцкі нідэрландская чэшскі дацкая харвацкая Кітайскі (традыцыйны) тагальская урду Азейбарджанский армянскіпольскі бенгальская грузінскі казахскі каталонская Mongolski руская Таджитский Tamil'skij тэлугу Узбецкий

дадаць каментар

Ваш e-mail не будзе апублікаваны. Абавязковыя палі пазначаныя *