HTML/CSS/Box Model/vertical align

Материал из Web эксперт
Версия от 11:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Aligned to baseline, lowered to baseline and raised to 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 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;

}

  • .baseline {
 vertical-align: baseline;
 background: black;
 color: white;

}

  • .raised {
 vertical-align: 10px;
 background: red;

}

  • .lowered {
 vertical-align: -10px;
 blackground: yellow;

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

Aligned to baseline. Lowered relative to the baseline. Raised relative to...

</body> </html>

</source>
   
  


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

A A A.

A A A

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


The image is vertically aligned using the value baseline

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {

 font: 12pt arial;

} img.baseline {

 vertical-align: baseline;

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

<img class="baseline" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value baseline

</body> </html>

</source>
   
  


The image is vertically aligned using the value middle

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {

 font: 12pt arial;

}

img.middle {

 vertical-align: middle;

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

<img class="middle" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value middle

</body> </html>

</source>
   
  


The image is vertically aligned using the value sub

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {

 font: 12pt arial;

} img.sub {

 vertical-align: sub;

}

</style> </head> <body>

<img class="sub" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value sub

</body> </html>

</source>
   
  


The image is vertically aligned using the value super

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {

 font: 12pt arial;

} img.super {

 vertical-align: super;

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

<img class="super" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value super

</body> </html>

</source>
   
  


The image is vertically aligned using the value text-bottom

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {

 font: 12pt arial;

} img.text-bottom {

 vertical-align: text-bottom;

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

<img class="text-bottom" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value text-bottom

</body> </html>

</source>
   
  


The image is vertically aligned using the value text-top

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {

 font: 12pt arial;

} img.text-top {

 vertical-align: text-top;

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

<img class="text-top" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value text-top

</body> </html>

</source>
   
  


The image is vertically aligned using the value top

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {

 font: 12pt arial;

}

img.top {

 vertical-align: top;

}

</style> </head> <body>

<img class="top" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value text-bottom

</body> </html>

</source>
   
  


The length is offset from the bottom of the line-height.

   <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>vertical-align</title>
             <style rel="stylesheet" type="text/css">
     p {
         font: 12px sans-serif;
     }
     span.line {
         border: 1px solid rgb(200, 200, 200);
         background: rgb(244, 244, 244);
         font-size: 100px;
     }
     span.line span {
         vertical-align: 300%;
         font-size: 20px;
         background: white;
         border: 1px solid black;
     }
     span#length {
         vertical-align: 46px;
     }
   
             </style>
         </head>
         <body>
            

CSS 46px

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


The percentage value is a percentage of the line-height value

   <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>vertical-align</title>
             <style rel="stylesheet" type="text/css">
     p {
         font: 12px sans-serif;
     }
     span.line {
         border: 1px solid rgb(200, 200, 200);
         background: rgb(244, 244, 244);
         font-size: 100px;
     }
     span.line span {
         vertical-align: 300%;
         font-size: 20px;
         background: white;
         border: 1px solid black;
     }
     span#percentage {
         vertical-align: 200%;
     }
   
             </style>
         </head>
         <body>
            

CSS 200%

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


The text-top and text-bottom keyword align to the tallest and lowest character, respectively.

   <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>vertical-align</title>
             <style rel="stylesheet" type="text/css">
     p {
         font: 12px sans-serif;
     }
     span.line {
         border: 1px solid rgb(200, 200, 200);
         background: rgb(244, 244, 244);
         font-size: 100px;
     }
     span.line span {
         vertical-align: 300%;
         font-size: 20px;
         background: white;
         border: 1px solid black;
     }
     span#text-bottom {
         vertical-align: text-bottom;
     }  
   
             </style>
         </head>
         <body>
            

CSS Text Bottom

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


vertical align 100 percent

   <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 {
                   width: 200px;
                   margin: 10px;
                   padding: 10px;
                   border: 1px solid black;
                   font-size: 16px;
               }
               span {
                   background: lightblue;  
               }
               span > span {
                   vertical-align: 100%;
                   background: lightgray;
               }
           </style>
       </head>
       <body>

this is a test. this is a test. pickled peppers. this is a test. this is a test. pickled peppers? this is a test. pickled this is a test. this is a test. pickled this is a test.

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


vertical align 20px

   <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 {
           width: 200px;
           margin: 10px;
           padding: 10px;
           border: 1px solid black;
           font-size: 16px;
       }
       span {
           vertical-align: 20px;
           background: lightyellow;
       }
           </style>
       </head>
       <body>

this is a test. this is a test. pickled peppers. this is a test. this is a test. pickled peppers? this is a test. this is a test. pickled peppers, this is a test. this is a test. pickled picked?

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


vertical-align: 300%

   <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>vertical-align</title>
       <style rel="stylesheet" type="text/css">

p {

   font: 12px sans-serif;

} p#control {

   font-size: 100px;
   margin: 5px 0;

} p#control span {

   border: 1px solid rgb(200, 200, 200);
   background: rgb(244, 244, 244);

} p#control span span {

   vertical-align: 300%;
   font-size: 20px;
   background: white;
   border: 1px solid black;

}

       </style>
   </head>
   <body>

this is a test.

Nn Oo Pp 300%

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

this is a test. this is a test. pickled . this is a test. this is a test. pickled ? this is a test. this is a test. pickled , this is a test. this is a test. pickled ?

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


Vertical align elements of different heights

   <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"> <head> <title>Vertical-align an element of unknown height</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .outer {

 position:relative;
 display:table;
 height: 200px;
 width: 200px;
 vertical-align: middle; 
 text-align: center;
 background:#ccc;
 float:left

} .inner {

 width:100%;
 display:table-cell;
 vertical-align:bottom;
 position:relative;

} p{

   background:#aaa;

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

this is a test. this is a test. this is a test. this is a test. this is a test.

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

where"s the peck of pickled peppers Peter Piper picked?

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


vertical align: sub

   <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-size: 16px;
               }
               span {
                   font-size: 0.8em;
               }
               p#sub span {
                   vertical-align: sub;
               }
           </style>
       </head>
       <body>

This is normal text. This is subscript text. This is normal text.

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


vertical align: super

   <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-size: 16px;
               }
               span {
                   font-size: 0.8em;
               }
               p#super span {
                   vertical-align: super;
               }
           </style>
       </head>
       <body>

This is normal text. This is superscript text. This is normal text.

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


Vertical-align: text-top

   <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"> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen"> div {

 font-size: 60px;
 line-height: normal;
 border: 1px solid black;

}

  • .text {
 font-size: 18px;

}

  • .text-top {
 vertical-align: text-top;

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

   <img class="text-top" src="http://www.wbex.ru/style/logo.png" alt="bar" />
    text-top 
   
   

</body> </html>

</source>