Описание

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

Вместо този атрибут трябва да се използват стилове

Синтаксис

Стойности

Стойност по подразбиране

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

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Браузъри: настолен мобилен компютър ?

✖

Браузъри

Следните обозначения се използват в таблицата на браузъра.

• - елементът се поддържа напълно от браузъра;
• - елементът не се възприема от браузъра и се игнорира;
• - по време на работа могат да се появят различни грешки или елементът се поддържа с резерви.

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

За изображенията стандартите не дефинират подравняване по подразбиране по отношение на текст и други изображения на един и същ ред – не винаги е възможно да се предскаже как ще изглеждат тези компоненти.1 В HTML документите изображенията обикновено се позиционират „на една линия“ само с един ред текст. Както е обичайно в печатните медии, текстът ги „обгръща“, така че няколко реда могат да бъдат съседни на изображението, а не само един.

За щастие, създателите на документи имат известен контрол върху това как изображенията се подравняват със заобикалящия ги текст, като използват атрибута за подравняване на етикета. . Стандартите HTML и XHTML дефинират пет стойности за атрибута за подравняване: ляво, дясно, горе, по средата, отдолу. Стойностите отляво и отдясно карат текста да се обвива около изображението, изместен към подходящия ръб. Останалите три подравняват изображението вертикално по отношение на околния текст.

Всички популярни браузъри, включително Opera, Firefox, Netscape и Internet Explorer, се съгласяват, че атрибутът align=bottom е вертикалното подравняване по подразбиране и равномерно поставят изображения над най-горния знак в ред текст, вижте Фигура 1. 15.11.

В същото време браузърите не са съгласни как да позиционират изображенията с атрибута align=middle спрямо текста. На фиг. Фигура 5.11 показва, че Netscape и Opera поставят изображението въз основа на централната линия на текста. Относно браузърите Internet Explorer

Ориз. 5.11. Стандартно подравняване на вградените изображения

Ориз. 5.12. Internet Explorer и Firefox подравняват централната линия на изображението с централната линия на най-високия елемент, а не с централната линия на текста

и Firefox, те позиционират изображението по централната линия на най-високия елемент, който не е непременно текст (Фигура 5.12).

В допълнение, браузърите в една или друга степен поддържат пет допълнителни функции за вертикално подравняване на изображението: texttop, center, absmiddle, baseline и absbottom (тези, които не са познали значението им, вдигнете ръка):

Изразът align=texttop казва на браузъра да подравни горния ръб на изображението с горния ръб на най-високия текстов елемент на текущия ред. В противен случай top е стойността, която подравнява горния ръб на изображението с горния ръб на най-високия елемент, текстов компонент или изображение на текущия ред. Ако редът не съдържа други изображения, стърчащи над текста, texttop и top имат същия ефект. Opera не поддържа texttop, но други популярни браузъри го интерпретират стриктно според това описание.

Въведен за първи път в Internet Explorer и Netscape, центърът на стойността се интерпретира по същия начин като средата в Internet Explorer, Netscape и Firefox. Само да не забравяме, че всеки от тях разбира значението на средата по свой начин. Opera игнорира израза align=center.

Ако зададете атрибута align на етикета absmiddle стойност, браузърът ще зададе абсолютната среда на изображението спрямо абсолютната среда на текущия ред. Това не е случаят със средните и централните стойности, които подравняват средата на изображението с основната линия на текущия ред текст. Докато Netscape и Opera не правят разлика между absmiddle и middle, Firefox и Internet Explorer използват тези стойности за селективно подравняване на изображения по средните линии. С други думи, Firefox и Internet Explorer третират absmiddle по същия начин, по който Netscape третира middle.

Ориз. 5.13. Когато подравняват изображения с атрибута alingn=absbottom, браузърите вземат под внимание допълнителните обозначения

долна и основна линия (по подразбиране)

Стойностите на долната и базовата линия имат същия ефект, както ако изобщо не сте включили атрибута за подравняване. Браузърът подравнява долния край на изображението с основната линия на текста. Това не трябва да се бърка с ефекта на стойността на absbottom, която също взема предвид онези части от буквите, които отиват под основната линия.1 (Ако все още държите ръката си вдигната, можете да я спуснете.)

Изразът align=absbottom казва на браузъра да подравни долния ръб на изображението с истинския долен ръб на текста на текущия ред. Истинската долна част е най-ниската точка на текста, включително всички низходящи (като долната част на "y"), дори ако няма такива на реда. Основната линия минава по долния край на "v" в символа "y". Opera, стандартният носител, игнорира стойността absbottom, а други популярни браузъри я третират, както е описано (Фигура 5.13).

Използвайте горната и средната част, за да комбинирате икони, водещи списъци и други специални изображения със съседен текст. В други случаи align=bottom (избрано по подразбиране) постига по-добър външен вид. Когато подравнявате едно или повече изображения в ред, изберете стойността на атрибута, която ще ви даде най-добрия външен вид на вашия документ.

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

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

Имало едно време един етикет

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

Можете да добавите картина, също подравнена към центъра, нека също да преминем към следващия ред с помощта на етикета
:

Заглавие от 1-во ниво, центрирано

Беше етикет

, който вече е остарял, освен това, противно на вашите очаквания за етикети И просто не съществува. Да кажем, подравнен вляво по подразбиране, подравнен в центъра с помощта на етикет , но какво да кажем за дясната?

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

. Тоест всичко, което трябва да се постави в определен контейнер, се поставя вътре в етикета

. И този етикет вече има атрибута " подравнете", чиято стойност определя позицията на този контейнер. Има три стойности: " наляво", "център", "точно". По подразбиране е " наляво„Мисля обаче, че това не ви изненадва.

Нека напишем същото сега HTML код, но използвайки контейнери, освен това, нека да подравним не към центъра, а вдясно.

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

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

Засега вашата страница трябва да изглежда така:

Заглавие от 1-во ниво, центрирано

Заглавие от 1-во ниво, подравнено вдясно

С уважение, Михаил Русаков.

P.S.Ако искате да научите повече за HTML, след това разгледайте безплатния ми курс с пример за създаване на уебсайт на адрес HTML:

За изображения можете да посочите тяхната позиция спрямо текст или други изображения на уеб страницата. Начинът, по който изображенията са подравнени, се определя от атрибута align.

Този атрибут е остарял, вместо това използвайте стилове.

Синтаксис

Стойности

В табл 1 изброява възможните стойности на атрибута align и резултата от неговото използване.

Таблица 1. Използване на подравняване на стойностите на атрибута

Значение	Описание	Пример
отдолу	Подравнява долната граница на изображението с околния текст.
наляво	Подравнява изображението към левия край на прозореца.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
средата	Подравнява средата на изображението спрямо основната линия на текущия ред.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
точно	Подравнява изображението към десния край на прозореца.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Горна част	Горната граница на изображението е подравнена спрямо най-високия елемент на текущия ред.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Стойност по подразбиране

Пример

Този текст се увива около левия край на картината.

Браузъри

Следните обозначения се използват в таблицата на браузъра.

• - елементът се поддържа напълно от браузъра;
• - елементът не се възприема от браузъра и се игнорира;
• - по време на работа могат да се появят различни грешки или елементът се поддържа с резерви.

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

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

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

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

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

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

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

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

Резултат:

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

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

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

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

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

Резултат:

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