Javascript css align text

CSS text-align Property

The text-align property specifies the horizontal alignment of text in an element.

Default value:	left if direction is ltr, and right if direction is rtl
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.textAlign=»right» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
left	Aligns the text to the left	Demo ❯
right	Aligns the text to the right	Demo ❯
center	Centers the text	Demo ❯
justify	Stretches the lines so that each line has equal width (like in newspapers and magazines)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Another text-align example:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Style textAlign Property

The textAlign property sets or returns the horizontal alignment of text in a block level element.

Browser Support

Syntax

Return the textAlign property:

Set the textAlign property:

Property Values

Value	Description
left	Aligns the text to the left. This is default
right	Aligns the text to the right
center	Centers the text
justify	The text is justified
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	left
Return Value:	A String, representing the horizontal alignment of text within the element
CSS Version	CSS1

More Examples

Example

Return the text alignment of an element:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Javascript свойство textAlign

Свойство textAlign устанавливает/возвращает текущее выравнивание относительно опорной точки для текстового содержим.

Обычно, вывод текста НАЧИНАЕТСЯ в заданной позиции. Тем не менее, если задать textAlign=»right» и вывести текст в позиции 150, то это означает, что текст ЗАКОНЧИТСЯ в позиции 150.

Примечание: Чтобы позиционировать текст на холсте и в действительности его отобразить, используется метод fillText() или strokeText().

Значение по умолчанию:	start
JavaScript синтаксис:	context.textAlign=»center | end | left | right | start»;

Возможные значения

Значение	Описание
start	Значение по умолчанию. Вывод текста начинается в заданной позиции
end	Текст заканчивается в заданной позиции
center	В заданной позиции будет центр текста
left	Текст начинается в заданной позиции
right	Текст заканчивается в заданной позиции

Пример использования

Создадим красную линию в позиции 150. Позиция 150 будет опорной точкой для всех текстовых строк в данном примере. Посмотрим эффект от каждого значения свойства textAlign:

Ваш браузер не поддерживает HTML5 тег canvas.

 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Создадим вертикальную красную линию ctx.strokeStyle="red"; ctx.moveTo(150,20); ctx.lineTo(150,170); ctx.stroke(); ctx.font="15px Arial"; // Покажем различные значения textAlign ctx.textAlign="start"; ctx.fillText("textAlign=start",150,60); ctx.textAlign="end"; ctx.fillText("textAlign=end",150,80); ctx.textAlign="left"; ctx.fillText("textAlign=left",150,100); ctx.textAlign="center"; ctx.fillText("textAlign=center",150,120); ctx.textAlign="right"; ctx.fillText("textAlign=right",150,140); 

Источник

textAlign style property

Syntax:

Possible values:

Text is centered.

Text is aligned to the left.

Text is aligned to the right.

Language dependent align rules.

Text is centered.

Text is aligned to the left.

Text is aligned to the right.

The text content of the element is centered.

Text is aligned to the end of the element’s box.

Takes the value of this property from the computed style of the parent element.

The text content of the element is justified.

Aligns the text content of the element to the left.

Aligns the text content of the element to the right.

Text is aligned the start of the element’s box.

Example HTML code 1:

head> style> .alignLeft  text-align: left; > .alignCenter  text-align: center; > .alignRight  text-align: right; > style> head> body> div class="alignLeft"> Align to left div> div class="alignCenter"> Align to center div> div class="alignRight"> Align to right div> body>

Example HTML code 2:

head> script type="text/javascript"> function ChangeTextAlign (selectTag)  // Returns the index of the selected option var whichSelected = selectTag.selectedIndex; // Returns the text of the selected option var alignValue = selectTag.options[whichSelected].text; var div = document.getElementById ("myDiv"); div.style.textAlign = alignValue; > script> head> body> div id="myDiv">Change textAlign!div> Change textAlign value: select onchange="ChangeTextAlign (this);" size="4"> option />left option />right option selected="selected" />center option />justify select> body>

Supported by objects:

Источник