http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FText%2Ftext_align
HTML/CSS/Text/text align - История изменений
2026-04-04T22:14:55Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Text/text_align&diff=5888&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Text/text_align&diff=5889&oldid=prev
Admin: 1 версия
2010-05-26T08:17:19Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Absolute centered==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
* .grandContainer {<br />
position: relative;<br />
height: 295px;<br />
width: 600px;<br />
border: 2px solid black;<br />
background: red;<br />
}<br />
* .parent {<br />
margin: 10px;<br />
padding: 10px;<br />
padding-top: 0;<br />
border: 1px solid black;<br />
background: purple;<br />
}<br />
#myStyle {<br />
position: absolute;<br />
text-align: center;<br />
top: 0;<br />
margin-top: 200px;<br />
width: auto;<br />
left: 0;<br />
margin-left: 110px;<br />
right: 0;<br />
margin-right: 30px;<br />
background-color: gold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="grandContainer">Positioned Grandparent <br />
<div class="parent">Non-positioned Parent <br />
<span id="myStyle" >absoluted centered.</span> <br />
</div><br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==centering a layout horizontally==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br />
<title>centering a layout horizontally</title><br />
<style type="text/css" media="screen"><br />
body {<br />
text-align:center;<br />
min-width:600px;<br />
}<br />
#wrapper {<br />
margin:0 auto;<br />
width:600px;<br />
text-align:left;<br />
background-color:#eee;<br />
border:3px solid #ddd;<br />
}<br />
<br />
p { padding:0 1em; }<br />
</style><br />
<br />
</head><br />
<body><br />
<div id="wrapper"><br />
<p>content</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Horizontally and Vertically Center-aligned static Content==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
.parent{<br />
width: 600px;<br />
height: 600px;<br />
background: gray;<br />
}<br />
#c {<br />
position: static;<br />
text-align: center;<br />
line-height: 48px;<br />
background: gold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="parent"><br />
<p id="c">Horizontally and Vertically Center-aligned Content</p> <br />
<br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==justified static line==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
.parent{<br />
width: 600px;<br />
height: 600px;<br />
background: gray;<br />
}<br />
#j {<br />
position: static;<br />
text-align: justify;<br />
background: blue;<br />
color : white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="parent"><br />
<p id="j">justified but the last line is not.</p> <br />
<br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Left-aligned static content==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
.parent{<br />
width: 600px;<br />
height: 600px;<br />
background: gray;<br />
}<br />
#l {<br />
position: static;<br />
text-align: left;<br />
background: pink;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="parent"><br />
<p id="l">Left-aligned content</p> <br />
<br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Right-aligned content==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
.parent{<br />
width: 600px;<br />
height: 600px;<br />
background: gray;<br />
}<br />
#r {<br />
position: static;<br />
text-align: right;<br />
background: purple;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="parent"><br />
<p id="r">Right-aligned content</p> <br />
<br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set text align to center==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h1, h2, h3 {<br />
font-size: 200%;<br />
background-image: url(bkgd2.jpg);<br />
background-repeat: no-repeat;<br />
background-attachment: fixed;<br />
background-position: center;<br />
padding: 1.5em;<br />
text-align: center;<br />
color: white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>header 1</h1><br />
<p>This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.<br />
This is a text. This is a text. This is a text. This is a text.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set text align to justify==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Set text align to justify</title><br />
<style type="text/css"><br />
P {<br />
width: 600px;<br />
text-align: justify;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==text-align: center;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p#center {<br />
text-align: center;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p id="center"><br />
This text is center aligned.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==text-align: left;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p#left {<br />
text-align: left;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p id="left"><br />
This text is aligned left.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==text-align:left, center, right==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html<br />
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css" rel="stylesheet"><br />
p.menu {<br />
text-align:left;<br />
color:red;<br />
}<br />
p.mainContent {<br />
text-align:center;<br />
color:black;<br />
background-color:white;<br />
}<br />
p.sideContent {<br />
text-align:right;<br />
color:yellow;<br />
background-color:white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="menu">this is a test. </p><br />
<p class="mainContent">this is a test. </p><br />
<p class="sideContent">this is a test. </p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Text alignment: center, left and justify==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Text alignment</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
background-color: #ffffff;<br />
font-family: arial, verdana, sans-serif;<br />
font-size: 12px;<br />
}<br />
p {<br />
width: 200px;<br />
}<br />
.center {<br />
text-align: center;<br />
}<br />
.left {<br />
text-align: left;<br />
}<br />
.justify {<br />
text-align: justify;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p class="center"><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id <br />
commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam <br />
semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. <br />
Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam <br />
ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus <br />
ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. <br />
Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus <br />
ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, <br />
sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. <br />
Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. <br />
Proin erat. Donec sem. <br />
</p><br />
<p class="left"><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id <br />
commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam <br />
semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. <br />
Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam <br />
ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus <br />
ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. <br />
Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus <br />
ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, <br />
sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. <br />
Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. <br />
Proin erat. Donec sem. <br />
</p><br />
<p class="justify"><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id <br />
commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam <br />
semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. <br />
Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam <br />
ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus <br />
ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. <br />
Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus <br />
ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, <br />
sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. <br />
Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. <br />
Proin erat. Donec sem. <br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==text-align: right;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p#right {<br />
text-align: right;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p id="right"><br />
This text is aligned right.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==text align to left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
margin-top: 0;<br />
text-align: left;<br />
font-family: Verdana;<br />
font-size: .9em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>header 2</h2><br />
<h3>header 3</h3><br />
<p>This is a text.</p><br />
<br />
</body><br />
</html><br />
</source></div>
Admin