HTML/CSS/CSS Attributes and Javascript Style Properties/text align
Содержание
text-align all possible values
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Example</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 12px;
}
table {
width: 500px;
}
td.leftAlign {
text-align: left;
}
td.rightAlign {
text-align: right;
}
td.center {
text-align: center;
}
td.justify {
text-align: justify;
}
</style>
</head>
<body>
<h1>text-align</h1>
<table>
<tr><td class="leftAlign">Here is some text</td></tr>
<tr><td class="rightAlign">Here is some text</td></tr>
<tr><td class="center">Here is some text</td></tr>
<tr><td class="justify">Here is some text</td></tr>
</table>
</body>
</html>
text align center
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h1, h2, h3 {
text-align: center;
}
</style>
</head>
<body>
<h2 id="warning">Lorem ipsum dolor sit amet</h2>
<h2 id="questions">Nulla cursus semper metus</h2>
</body>
</html>
"text-align" Example
<html>
<body>
<div id="myDiv"
style="text-align:center">
Click to change alignment to right.
</div>
<button onclick="myDiv.style.textAlign="right";">Align Right</button>
</body>
</html>
text-align: justify
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
text-align: justify;
border: 1px solid lightgrey;
text-indent: 25px;
width: 200px;
}
</style>
</head>
<body>
<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. This is a test. </p>
</body>
</html>
text-align:left;
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
p.left {
text-align:left;
color:red;
}
</style>
<title>Chapter Two, XHTML and CSS</title>
</head>
<body>
<p class="left">It is easy to use XHTML</p>
</body>
</html>
text-align:right;
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
p.right {
text-align:right;
color:yellow;
}
</style>
<title>Chapter Two, XHTML and CSS</title>
</head>
<body>
<p class="right">It is easy to use XHTML</p>
</body>
</html>
The text-align Property
Value Purpose
left Aligns the text with the left border of the containing element
right Aligns the text with the right border of the containing element
center Centers the content in the middle of the containing element
justify Spreads the width across the whole width of the containing element