Javascript div text align center

Выравнивание элементов по центру

Здравствуйте уважаемые форумчане, пожалуйста поделитесь мудростью, как вы решаете подобные задачки, нужно чтобы кнопка и текстовое поле были по центру экрана. Как это решать лучше, по скудному моему опыту сайтотроения на ум приходит все обернуть таблицей. Но возможно что то есть и получше, буду признателен за помощь

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

var body = document.getElementsByTagName("body")[0]; var fieldImp = document.createElement ('input'); function addBt(nameBt, posXBt, posYBt, typeBt, linkBt) { var btn = document.createElement('button'); btn.name = typeBt; btn.style.borderStyle = 'none'; btn.style.background = "url('" + linkBt + "') no-repeat center center"; btn.style.position = 'fixed'; btn.style.top = posYBt + "px"; btn.style.left = posXBt + "px"; btn.style.height = "128px"; btn.style.width = "128px"; btn.style.font = "italic bold 18px arial,serif"; body.appendChild(btn); btn.addEventListener ("click", function() { if (field.value == "123") { window.location.replace = 'table.html'; window.location.href = 'table.html'; } }); } function inputField() { fieldImp.name = 'numImp'; fieldImp.value = 'Пароль'; fieldImp.style.top = "68px"; fieldImp.style.left = '32px'; fieldImp.style.width = '420px' fieldImp.style.font = "italic bold 42px arial,serif"; fieldImp.style.textAlign = 'center'; fieldImp.style.position = 'fixed'; body.appendChild(fieldImp); fieldImp.onclick = function () { this.value = ""; }; fieldImp.onkeyup = function(e) { var code = (e.keyCode ? e.keyCode : e.which); if(code == 13 && fieldImp.value == "123") { window.location.replace = 'table.html'; window.location.href = 'table.html'; } } } inputField(); addBt('Пароль', 482, 20, 'pass', 'icon/icon05.png');

html> head> meta charset="utf-8"> title>Незавершенное производство/title> /head> body> script type="text/javascript" src = "js/pass.js">/script> /body> /html>

Источник

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.

Источник

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.

Источник

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:

Источник