HTML/CSS/Box Model/vertical align

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

Aligned to baseline, lowered to baseline and raised to baseline

 

<!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>
<div class="parent">
    <p>
        <span class="baseline">Aligned to baseline.</span> 
        <span class="lowered">Lowered relative to the baseline.</span> 
        <span class="raised">Raised relative to... </span>
    
    </p>
    
</div> 
</body>
</html>



text vertical align top and bottom

 
<!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>
            <p>
                <span>
                   A
                        <span id="text-top">A</span> 
                        <span id="top">A.</span>
                </span>
            </p>
            <p>
                <span>
                    A
                        <span id="text-bottom">A</span>
                        <span id="bottom">A</span>
                </span>
            </p>
        </body>
    </html>



The image is vertically aligned using the value baseline

 
<?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>
<p><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</p>
</body>
</html>



The image is vertically aligned using the value middle

 
<?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>
<p><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 </p>
</body>
</html>



The image is vertically aligned using the value sub

 
<?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>
<p><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 </p>
</body>
</html>



The image is vertically aligned using the value super

 
<?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>
<p><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 </p>
</body>
</html>



The image is vertically aligned using the value text-bottom

 
<?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>
<p><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 </p>
</body>
</html>



The image is vertically aligned using the value text-top

 
<?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>
<p><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 </p>
</body>
</html>



The image is vertically aligned using the value top

 
<?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>
<p><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 </p>
</body>
</html>



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

 

      <!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>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="length">46px</span>
                  </span>
           </p>
        </body>
      </html>



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

 

      <!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>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="percentage">200%</span>
                  </span>
           </p>
        </body>
      </html>



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

 
      <!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>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="text-bottom">Text Bottom</span>
                  </span>
           </p>
        </body>
      </html>



vertical align 100 percent

 
<!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>
         <p>
          <span>
            this is a test. this is a test. <span>pickled</span> peppers.
            this is a test. this is a test. <span>pickled</span> peppers?
            this is a test. <span>pickled</span> this is a test. 
            this is a test. <span>pickled</span> this is a test. 
           </span>
         </p>
        </body>
    </html>



vertical align 20px

 
<!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>
          <p>
          this is a test. this is a test. <span>pickled</span> peppers.
          this is a test. this is a test. <span>pickled</span> peppers?
          this is a test. this is a test. <span>pickled</span> peppers,
          this is a test. this is a test. <span>pickled</span> picked?
      </p>
        </body>
    </html>



vertical-align: 300%

 
<!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>
        <p>
            this is a test. 
        </p>
        <p id="control">
            <span>Nn Oo Pp <span>300%</span></span>
        </p>
    </body>
</html>



vertical align: bottom

 
<!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>
          <p>
          this is a test. this is a test. <span>pickled</span> .
          this is a test. this is a test. <span>pickled</span> ?
          this is a test. this is a test. <span>pickled</span> ,
          this is a test. this is a test. <span>pickled</span> ?
      </p>
        </body>
    </html>



Vertical align elements of different heights

 
<!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>
<div class="outer"><div class="inner"><p>this is a test. this is a test. 
this is a test. this is a test. this is a test. </p></div></div>
</body>
</html>



vertical-align: middle

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

            <p>
                <span>
                    where"s the peck of
                        <span class="valign" id="text-bottom">pickled</span>
                    peppers Peter Piper picked?
                </span>
            </p>
        </body>
    </html>



vertical align: sub

 
<!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>
            <p id="sub">
               This is normal text. <span>This is subscript text.</span> This is normal text.
            </p>
        </body>
    </html>



vertical align: super

 
<!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>
            <p id="super">
               This is normal text. <span>This is superscript text.</span> This is normal text.
            </p>
        </body>
    </html>



Vertical-align: text-top

 

<!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>
<div>
    <img class="text-top" src="http://www.wbex.ru/style/logo.png" alt="bar" />
    <span class="text-top text"> text-top</span> 
    
    
</div> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/vertical_align&oldid=5311»