HTML/CSS/Text/text align

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

Absolute centered

 

<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
#myStyle {
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: 0;
  margin-left: 110px;
  right: 0;
  margin-right: 30px;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myStyle" >absoluted centered.</span> 
  </div>
</div> 
</body>
</html>



centering a layout horizontally

 
<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>centering a layout horizontally</title>
  <style type="text/css" media="screen">
    body {
      text-align:center;
      min-width:600px;
    }
    #wrapper {
      margin:0 auto;
      width:600px;
      text-align:left;
      background-color:#eee;
      border:3px solid #ddd;
    }
    
    p { padding:0 1em; }
  </style>
  
</head>
<body>
  <div id="wrapper">
    <p>content</p>
  </div>
</body>
</html>



Horizontally and Vertically Center-aligned static Content

 
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.parent{
   width: 600px;
   height: 600px;
   background: gray;
}
#c {
  position: static;
  text-align: center;
  line-height: 48px;
  background: gold;
}
</style>
</head>
<body>
<div class="parent">
    <p id="c">Horizontally and Vertically Center-aligned Content</p> 
    
</div> 
</body>
</html>



justified static line

 
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.parent{
   width: 600px;
   height: 600px;
   background: gray;
}
#j {
  position: static;
  text-align: justify;
  background: blue;
  color : white;
}
</style>
</head>
<body>
<div class="parent">
    <p id="j">justified but the last line is not.</p> 
    
</div> 
</body>
</html>



Left-aligned static content

 
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.parent{
   width: 600px;
   height: 600px;
   background: gray;
}
#l {
  position: static;
  text-align: left;
  background: pink;
}
</style>
</head>
<body>
<div class="parent">
    <p id="l">Left-aligned content</p> 
    
</div> 
</body>
</html>



Right-aligned content

 
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.parent{
   width: 600px;
   height: 600px;
   background: gray;
}
#r {
  position: static;
  text-align: right;
  background: purple;
}
</style>
</head>
<body>
<div class="parent">
   <p id="r">Right-aligned content</p> 
    
</div> 
</body>
</html>



Set text align to 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" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
h1, h2, h3 {
 font-size: 200%;
 background-image: url(bkgd2.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 padding: 1.5em;
 text-align: center;
 color: white;
}
</style>
</head>
<body>
  <h1>header 1</h1>
  <p>This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.
  This is a text. This is a text. This is a text. This is a text.</p>
</body>
</html>



Set text align to justify

 
<!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>Set text align to justify</title>
<style type="text/css">
P {
 width: 600px;
 text-align: justify;
}
</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.</p>
  
</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>
    <head>
        <title></title>
        <style type="text/css">
      p#center {
          text-align: center;
      }
        </style>
    </head>
    <body>
    <p id="center">
        This text is center aligned.
    </p>
    </body>
</html>



text-align: left;

 
<!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#left {
          text-align: left;
      }
        </style>
    </head>
    <body>
    <p id="left">
        This text is aligned left.
    </p>
    </body>
</html>



text-align:left, center, right

 
<!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" xml:lang="en">
  <head>
    <title></title>
    <style type="text/css" rel="stylesheet">
p.menu {
   text-align:left;
   color:red;
}
p.mainContent {
   text-align:center;
   color:black;
   background-color:white;
}
p.sideContent {
   text-align:right;
   color:yellow;
   background-color:white;
}
    </style>
  </head>
  <body>
    <p class="menu">this is a test. </p>
    <p class="mainContent">this is a test. </p>
    <p class="sideContent">this is a test. </p>
  </body>
</html>



Text alignment: center, left and justify

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//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>Text alignment</title>
  <style rel="stylesheet" type="text/css">
body {
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}
p {
  width: 200px;
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.justify {
  text-align: justify;
}
</style>
</head>
<body>
<p class="center">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id 
           commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam 
           semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. 
           Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam 
           ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus 
           ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. 
           Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus 
           ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, 
           sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. 
           Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. 
           Proin erat. Donec sem. 
</p>
<p class="left">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id 
           commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam 
           semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. 
           Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam 
           ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus 
           ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. 
           Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus 
           ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, 
           sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. 
           Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. 
           Proin erat. Donec sem. 
</p>
<p class="justify">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id 
           commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam 
           semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. 
           Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam 
           ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus 
           ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. 
           Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus 
           ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, 
           sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. 
           Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. 
           Proin erat. Donec sem. 
</p>
</body>
</html>



text-align: right;

 
<!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#right {
          text-align: right;
      }
        </style>
    </head>
    <body>
    <p id="right">
        This text is aligned right.
    </p>
    </body>
</html>



text align to left

 
<!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">
    <head>
        <title></title>
<style type="text/css">
p {
  margin-top: 0;
  text-align: left;
  font-family: Verdana;
  font-size: .9em;
}
</style>
    </head>
    <body>
<h2>header 2</h2>
<h3>header 3</h3>
<p>This is a text.</p>

    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/text_align&oldid=5889»