HTML/CSS/Text/text align

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

Absolute centered

   <source lang="html4strict">

<!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;

}

  1. 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>

Positioned Grandparent
Non-positioned Parent 
   absoluted centered.

</body> </html> 

</source>


centering a layout horizontally

   <source lang="html4strict">

<!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>

content

</body> </html> 

</source>


Horizontally and Vertically Center-aligned static Content

   <source lang="html4strict">

<!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;

}

  1. c {
 position: static;
 text-align: center;
 line-height: 48px;
 background: gold;

} </style> </head> <body>

Horizontally and Vertically Center-aligned Content

</body> </html> 

</source>


justified static line

   <source lang="html4strict">

<!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;

}

  1. j {
 position: static;
 text-align: justify;
 background: blue;
 color : white;

} </style> </head> <body>

justified but the last line is not.

</body> </html> 

</source>


Left-aligned static content

   <source lang="html4strict">

<!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;

}

  1. l {
 position: static;
 text-align: left;
 background: pink;

} </style> </head> <body>

Left-aligned content

</body> </html> 

</source>


Right-aligned content

   <source lang="html4strict">

<!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;

}

  1. r {
 position: static;
 text-align: right;
 background: purple;

} </style> </head> <body>

Right-aligned content

</body> </html> 

</source>


Set text align to center

   <source lang="html4strict">

<!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>

header 1

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.

</body> </html> 

</source>


Set text align to justify

   <source lang="html4strict">

<!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>

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.

</body> </html> 

</source>


text-align: center;

   <source lang="html4strict">

<!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>

This text is center aligned. 

   </body>

</html> 

</source>


text-align: left;

   <source lang="html4strict">

<!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>

This text is aligned left. 

   </body>

</html> 

</source>


text-align:left, center, right

   <source lang="html4strict">

<!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>

this is a test.

this is a test.

this is a test. 

 </body>

</html> 

</source>


Text alignment: center, left and justify

   <source lang="html4strict">

<?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>

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.

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.

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.

</body> </html> 

</source>


text-align: right;

   <source lang="html4strict">

<!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>

   </body>

</html> 

</source>


text align to left

   <source lang="html4strict">

<!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>

header 2

header 3

This is a text.

   </body>

</html> 

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