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

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

vertical align: baseline

   <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 {
                   margin: 10px;
                   font-size: 40px;
               }
               span {
                 background: lightblue;
               }
               span.valign {
                 font-size: 16px;
                   color: white;
                   background: steelblue;
                   font-weight: bold;
               }
               span#baseline {
                   vertical-align: baseline;
               }
           </style>
       </head>
       <body>

This is a test. This is a test. This is a test. 

       </body>
   </html>
</source>


vertical align: bottom

   <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 {
         font-family: sans-serif;
           width: 200px;
           margin: 10px;
           padding: 10px;
           border: 1px solid black;
           font-size: 16px;
       }
       img {
           vertical-align: bottom;
       }
           </style>
       </head>
       <body>

The bottom of the image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically with the bottom of the line box. 

       </body>
   </html>
</source>


"vertical-align" Example

   <source lang="html4strict">

<html> <body>

Cell 1 content Cell 2 content
<img src="http://www.wbex.ru/style/logo.png">Cell 3 text content Cell 4 text content


<input type="button" 

      onclick="myT.style.verticalAlign="text-top"" 
      value="Set verticalAlign to text-top">

<input type="button" 

      onclick="myT.style.verticalAlign="text-bottom"" 
      value="Set verticalAlign to text-bottom">

<input type="button" 

      onclick="myT.style.verticalAlign="top"" 
      value="Set verticalAlign to top">

<input type="button" 

      onclick="myT.style.verticalAlign="bottom"" 
      value="Set verticalAlign to bottom">

<input type="button" 

      onclick="myT.style.verticalAlign="auto"" 
      value="Restore position">

</body> </html> 


     </source>


vertical align: middle

   <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 {
         font-family: sans-serif;
           width: 200px;
           margin: 10px;
           padding: 10px;
           border: 1px solid black;
           font-size: 16px;
       }
       img {
           vertical-align: middle;
       }
           </style>
       </head>
       <body>

The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned to the center of the line. 

       </body>
   </html>
</source>


vertical-align possible values

   <source lang="html4strict">

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

 color: #000000;
 background-color: #ffffff;
 font-family: arial, verdana, sans-serif;
 font-size: 12px;

} td { 

 border-style: solid;
 border-width: 1px;
 border-color: #000000;

} td.none { 

 border-style: none;

} .plain { 

 color: #FF0000;

} .baseline { 

 vertical-align: baseline;

} .sub { 

 vertical-align: sub;

} .super { 

 vertical-align: super;

} .top { 

 vertical-align: top;

} .texttop { 

 vertical-align: text-top;

} .middle { 

 vertical-align: middle;

} .bottom { 

 vertical-align: bottom;

} .textbottom { 

 vertical-align: text-bottom;

} .oneHundredPercent { 

 vertical-align: 100%;

} .fiftyPercent { 

 vertical-align: 50%;

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

vertical-align

   Plain text baseline<img class="baseline" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text sub<img class="sub" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text super<img class="super" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text top<img class="top" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text texttop<img class="texttop" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text middle<img class="middle" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text bottom<img class="bottom" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text textbottom<img class="textbottom" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text 100%<img class="100percent" src="images/block.gif" width="50" height="50" alt="block" />
 
   Plain text 50%<img class="50percent" src="images/block.gif" width="50" height="50" alt="block" />

</body> </html> 

</source>


vertical-align: sub

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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></title>
 <style type="text/css">
   .g1 { 
     font: 0.6em/1 Georgia, serif;
     vertical-align: sub;
   }
 </style>

</head> <body>

before spang1 0.6em Georgia

</body> </html> 

</source>


vertical-align: super

   <source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.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></title>
 <style type="text/css">
   .g1 { 
     font: 0.6em/1 Georgia, serif;
     vertical-align: super;
   }
 </style>

</head> <body>

before spang1 0.6em

</body> </html> 

</source>


vertical-align: text-bottom

   <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 {
                   margin: 10px;
                   font-size: 40px;
               }
               span {
                 background: lightblue;
               }
               span#text-bottom {
                 font-size: 16px;
                   color: white;
                   background: pink;
                   font-weight: bold;
                 vertical-align: text-bottom;
               }
           </style>
       </head>
       <body>

AAA 

       </body>
   </html>
</source>


vertical-align: text-top

   <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 {
                   margin: 10px;
                   font-size: 40px;
               }
               span {
                 background: lightblue;
               }
               span.valign {
                 font-size: 16px;
                   color: white;
                   background: steelblue;
                   font-weight: bold;
               }
               span#text-top {
                   vertical-align: text-top;     
               }
           </style>
       </head>
       <body>

asdf asdf asdf 

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