.

Атрибутът за подравняване е доста гъвкав и може да се прилага не само към основен текст, но и към заглавия като

. Пример 1 показва как да зададете подравняването в такъв случай.

Пример 1: Подравняване на текст

Как да хванем лъв?

метод на изброяване

Разделяме пустинята на няколко елементарни участъка, чийто размер съвпада с общите размери на лъва, но е по-малък от размера на клетката. След това чрез просто изброяване определяме района, в който се намира лъвът, което автоматично води до залавянето му.

метод на дихотомия

Разделяме пустинята на две половини. В едната част има лъв, в другата няма. Взимаме половината, в която се намира лъвът, и го разделяме отново наполовина. Така повтаряме, докато лъвът бъде уловен.

Резултатът от примера е показан на фиг. 1.

Ориз. 1. Подравнете текста отдясно и отляво

IN този примерзаглавието е подравнено към центъра на прозореца на браузъра, избраният абзац вдясно и основният текст вляво.

HTML тагове, определящи подравняване на текста, отстъп

Подравнен текст, използван в типографията

Примерът по-долу показва как да подравните текст по ширинастраници:

подравняване="наляво"	align="right"
	Всеки ден нараства броят на заетите в сектора на услугите и разпространението на информация. Ако символите на миналите векове бяха фермата и фабриката, то символът на настоящия 21 век е офис, оборудван с компютри, които имат достъп до информационния поток.
align="justify"	подравняване="център"
Всеки ден нараства броят на заетите в сектора на услугите и разпространението на информация. Ако символите на миналите векове бяха фермата и фабриката, то символът на настоящия 21 век е офис, оборудван с компютри, които имат достъп до информационния поток.	Всеки ден нараства броят на заетите в сектора на услугите и разпространението на информация. Ако символите на миналите векове бяха фермата и фабриката, то символът на настоящия 21 век е офис, оборудван с компютри, които имат достъп до информационния поток.

Стойността за оправдаване осигурява еднаквост подравняване на текста отдясно и отляво, това е в ширина. Този метод се използва широко в печата.

Подравняване на текст в HTML за центриране и подравняване

Подравнете текста в HTML към центъра, текста вдясно:

Резултат:

Атрибути и ценности

• align="left" - дефинира ляво подравняване на текста(по подразбиране).
• подравняване="център" - подравнява текста към центъра.
• align="right" подравнява текста надясно.

Подравняване | Отстъп на HTML текст

HTML текст и неговия отстъп вляво на страницата

Да произвеждаме отстъп на текстаотляво по два начина:

Резултат:

Преглед в нов прозорец.

Здравейте! Продължаване на изучаването на основите HTML език. Нека да видим какво трябва да напишете, за да подравните текста към центъра, ширината или краищата.

Като се заемем с работата, нека да разгледаме как да направим текстов център три в HTML различни начини. Последните две са свързани директно със стиловия лист. Това може да бъде CSS файл, който е свързан със страниците на сайта и задава техния външен вид.

Метод 1 - работа директно с HTML

Всъщност всичко е съвсем просто. Вижте примера по-долу.

Подравнете абзаца към центъра.

Ако искате да преместите текстовите фрагменти по различен начин, тогава вместо параметъра „център“ въведете следните стойности:

• justify - подравняване на текста спрямо ширината на страницата;
• дясно - на десния ръб;
• ляво - отляво.

По аналогия можете да преместите съдържанието, което е в заглавките (h1, h2), контейнера (div).

Метод 2 и 3 - използване на стилове

Представеният по-горе дизайн може леко да се трансформира. Ефектът ще е същият. За да направите това, трябва да напишете кода по-долу.

Текстов блок.

В тази форма кодът се записва директно в HTML, за да центрира текстовото съдържание.

Има и друг алтернативен начин за постигане на резултата. Ще трябва да направите няколко неща.

Стъпка 1. В основния код напишете

Текстов материал.

Стъпка 2. Във включения CSS файл въведете следния код:

Ровно (text-align:center;)

Отбелязвам, че думата "ровно" е просто името на клас, който може да се нарича по различен начин. Това е оставено на преценката на програмиста.

По аналогия, в HTML можете лесно да центрирате текста, да го подравните и да го подравните отдясно или отляво на страницата. Както можете да видите, далеч няма един вариант за постигане на целта.

Само няколко въпроса:

• Правите ли информационен некомерсиален проект?
• Искате ли вашият сайт да се представя добре? търсачки?
• Искате ли да печелите доходи онлайн?

Ако всички отговори са положителни, тогава просто погледнете интегрирания подход към разработването на уебсайт. Информацията ще бъде особено полезна, ако проработи CMS WordPress.

Бих искал да отбележа, че вашите собствени сайтове са само една от многото възможности за генериране на пасивен или активен доход в Интернет. Моят блог е само за финансовите възможности в мрежата.

Работили ли сте някога в сферата на трафик арбитраж, копирайтинг и други дейности, които носят основен или допълнителен доход с дистанционно сътрудничество? Можете да научите за това и много повече точно сега на страниците на моя блог.

Напред ще публикувам все още не малко реалистично полезна информация. Поддържате връзка. Ако желаете, можете да се абонирате за актуализации на Workip по имейл. Формата за абонамент се намира по-долу.

Когато оформяте страница, често е необходимо да я подравните css център-way: например, центрирайте основното устройство. Има няколко варианта за решаване на този проблем, всеки от които рано или късно трябва да се използва от всеки дизайнер на оформление.

Централно подравняване на текста

Често за декоративни цели искате да зададете подравняването на текста към центъра, CSS в този случай ви позволява да намалите времето за оформление. Преди това се правеше с помощта на HTML атрибути, но сега стандартът изисква текстът да бъде подравнен с помощта на таблици със стилове. За разлика от блоковете, за които трябва да промените полетата, в CSS подравняванецентрираният текст се прави с един ред:

• подравняване на текст: център;

Това свойство се наследява и предава от родител на всички деца. Засяга не само текста, но и други елементи. За да направите това, те трябва да са вградени (например span) или inline-block (всички блокове, които имат зададено свойство display: block). Последната опция също ви позволява да промените ширината и височината на елемента, по-гъвкаво да регулирате отстъпите.

Често на страниците подравняването се приписва на самия таг. Това веднага прави кода невалиден, тъй като W3C е отхвърлил атрибута align. Използването му на страница не се препоръчва.

Подравняване на блок към центъра

Ако трябва да центрирате div, CSS може да предложи доста. удобен начин: използвайте маржове. Отстъпите могат да се задават както за блокови елементи, така и за вградени блокови елементи. Стойността на свойството трябва да приема стойностите 0 (вертикални отстъпи) и auto (автоматични хоризонтални отстъпи):

• margin:0 auto;

Сега тази опция се признава за абсолютно валидна. Използването на полета също ви позволява да зададете подравняването на изображението към центъра: това ви позволява да разрешите много проблеми, свързани с позиционирането на елемент на страница.

Подравнете блока отляво или отдясно

Понякога не се изисква центриране по CSS начин, но трябва да поставите два блока един до друг: единият отляво, другият отдясно. За това има float свойство, който може да приема една от трите стойности: ляво, дясно или нито една. Да приемем, че имате два блока, които трябва да бъдат поставени един до друг. Тогава кодът ще бъде така:

• .left (float:left;)
• .right(float:right)

Ако има и трети блок, който трябва да се намира под първите два блока (например долен колонтитул), тогава той трябва да зададе свойството clear:

• .left (float:left;)
• .right(float:right)
• долен колонтитул (изчистване: и двете)

Факт е, че блокове с класове отляво и отдясно изпадат от общия поток, тоест всички останали елементи игнорират самото съществуване на подравнени елементи. Свойството clear:both позволява на долния колонтитул или всеки друг блок да вижда елементите, които са изпаднали от потока, и деактивира обвиването (float) както наляво, така и надясно. Следователно в нашия пример долният колонтитул ще се премести надолу.

Вертикално подравняване

Има случаи, когато не е достатъчно да зададете централно подравняване по CSS начини, трябва също да промените вертикалната позиция на дъщерния блок. Всеки вграден или вграден блоков елемент може да бъде изравнен с горната или долната част, да бъде в средата на родителски елемент или да бъде на произволна позиция. Най-често един блок трябва да бъде центриран, което се прави с помощта на атрибута vertical-align. Да кажем, че има два блока, единият вложен в другия. В този случай вътрешният блок е inline-block елемент (показване: inline-block). Трябва да подравните дъщерния блок вертикално:

• подравняване отгоре - .child(vertical-align:top);
• централно подравняване - .child(vertical-align:middle);
• подравняване отдолу - .child(vertical-align:bottom);

Елементите на ниво блок не се влияят от подравняване на текст или вертикално подравняване.

Възможни проблеми с подравнени блокове

Понякога центрирането на div по CSS начин може да причини малки проблеми. Например, когато използвате float: да кажем, че има три блока: .first, .second и .third. Вторият и третият блок лежат в първия. Елементът с втори клас е подравнен вляво, а последният блок е подравнен вдясно. След подравняването и двете изпаднаха от потока. Ако родителският елемент няма зададена височина (например 30em), тогава той вече няма да се разтяга до височината на дъщерните блокове. За да избегнат тази грешка, те използват "spacer" - специален блок, който вижда .second и .third. CSS код:

• .second(float:left)
• .third(float:right)
• .clearfix(височина:0; ясно: и двете;)

Псевдокласът :after често се използва, което също ви позволява да поставите блокове обратно на мястото им чрез създаване на псевдо разделител (в примера div с контейнерния клас се намира вътре в .first и съдържа .left и .right):

• .left(float:left)
• .right(float:right)
• .container:after(content:""; display:table; clear:both;)

Горните опции са най-често срещаните, въпреки че има няколко варианта. Винаги можете да намерите най-лесния и удобен начин за създаване на псевдо дистанционер чрез експериментиране.

Друг проблем, с който дизайнерите на оформление често се сблъскват, е подравняването на вградени блокови елементи. След всеки от тях автоматично се добавя интервал. Свойството margin, което е зададено на отрицателен марж, помага да се справите с това. Има и други начини, които се използват много по-рядко: например нулиране В този случай font-size:0 се записва в свойствата на родителския елемент. Ако има текст вътре в блоковете, тогава необходимият размер на шрифта вече е върнат в свойствата на елементите на вградения блок. Например font-size:1em. Методът не винаги е удобен, така че опцията с външни отстъпи се използва много по-често.

Подравняването на блокове ви позволява да създавате красиви и функционални страници: това е оформлението на общото оформление, местоположението на стоките в онлайн магазините и снимките на сайта на визитната картичка.

Изглежда, че няма нищо трудно да зададете изображение или текст в центъра на прозореца на браузъра. Използваме тага CENTER и всичко си идва на мястото, където сме го замислили. Въпреки това, не всичко е толкова просто. Има три начина за центриране, всеки от които има свои собствени характеристики и разлики в различните браузъри.

Един от най-простите и удобни тагове - CENTER е предназначен за подравняване на блок от текст. Този етикет може да се използва и за центриране на фигури и таблици. Изключение правят елементите или за които подравняването се задава от свойствата на IMG тага. Така, ако поставим елемент вътре в тага CENTER, картината ще бъде подравнена вдясно.

Пример 4.1. Центриране с таг CENTER

Този текст ще бъде подравнен към центъра на прозореца на браузъра и отдолу
рисунка от дясната страна.

Формално CENTER трябва да се използва само като параметър към други блокови тагове (P, PRE и други). Въпреки това, в браузъра Netscape Navigator 2.0 CENTER беше въведен като самостоятелен етикет. Това допълнение имаше за цел да премахне допълнителната вертикална подложка, която се появява при използване на блок тагове. Ако вместо тага CENTER текстът е поставен вътре в параграф (

) , между хоризонталната линия и този текст се появява допълнителна вертикална подложка.

CENTER не е част от HTML спецификацията. В "официален" HTML форматиране, като подравняването на текст трябва да се извършва чрез атрибути на тагове (например,

) или използване на стилове. Въпреки това, този етикет получи правото да съществува. Въпреки това, след пускането на спецификацията HTML 4 W3, Консорциумът препоръча да се избягва използването на тага CENTER и елементът

, както е показано в пример 4.2.

Пример 4.2. Центриране с DIV таг

---

Друг начин за центриране е използването на стилове. Стиловете са инструкции, които ви позволяват да контролирате атрибути за форматиране като шрифт, цвят, подравняване и т.н. Пример за предефиниране на тага P за центриране на текста.

Пример 4.3. Центриране със стилове

Сега, когато ще използвате маркера P с горното
стил, текстът на параграфа ще бъде подравнен към центъра на прозореца на браузъра