HTML/CSS/CSS Attributes and Javascript Style Properties/text align

Материал из Web эксперт
Перейти к: навигация, поиск

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
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/text_align&oldid=4763»