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

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

vertical align: baseline

 
<!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>
            <p>
                <span>
                    This is a test. 
                        <span class="valign" id="baseline">This is a test. </span> 
                    This is a test. 
                </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 {
          font-family: sans-serif;
            width: 200px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            font-size: 16px;
        }
        img {
            vertical-align: bottom;
        }
            </style>
        </head>
        <body>
          <p>
          The bottom of the image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically with the bottom of the line box.
      </p>
        </body>
    </html>



"vertical-align" Example

    
<html>
<body>
<table width="70%" border="1" cellspacing="5" cellpadding="5">
   <tr height="50">
      <td>Cell 1 content</td>
      <td>Cell 2 content</td>
   </tr>
   <tr height="100" id="myT">
       <td><img src="http://www.wbex.ru/style/logo.png">Cell 3 text content</td>
       <td>Cell 4 text content</td>
   </tr>
</table>
<br>
<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>



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 {
          font-family: sans-serif;
            width: 200px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
            font-size: 16px;
        }
        img {
            vertical-align: middle;
        }
            </style>
        </head>
        <body>
          <p>
          The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned to the center of the line.
      </p>
        </body>
    </html>



vertical-align possible values

 
<?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>
<h1>vertical-align</h1>
<table>
  <tr><td>
    <span class="plain">Plain text</span> <span class="baseline">baseline</span><img class="baseline" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="sub">sub</span><img class="sub" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="super">super</span><img class="super" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="top">top</span><img class="top" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="texttop">texttop</span><img class="texttop" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="middle">middle</span><img class="middle" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="bottom">bottom</span><img class="bottom" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="textbottom">textbottom</span><img class="textbottom" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="oneHundredPercent">100%</span><img class="100percent" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
  <tr><td class="none">&nbsp;</td></tr>
  <tr><td>
    <span class="plain">Plain text</span> <span class="fiftyPercent">50%</span><img class="50percent" src="images/block.gif" width="50" height="50" alt="block" />
  </td></tr>
</table>
</body>
</html>



vertical-align: sub

 
<?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>
  <div>
    <p>before span<span class="g1">g1</span> <strong>0.6em Georgia</strong>
    </p>
  </div>
</body>
</html>



vertical-align: super

 
<?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>
  <div>
    <p>before span<span class="g1">g1</span> <strong>0.6em </strong>
    </p>
  </div>
</body>
</html>



vertical-align: text-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 {
                    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>
            <p>
                <span>
                    A<span id="text-bottom">A</span>A
                </span>
            </p>
        </body>
    </html>



vertical-align: text-top

 
<!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>
            <p>
                <span>
                    asdf 
                        <span class="valign" id="text-top">asdf</span> 
                    asdf
                </span>
            </p>
        </body>
    </html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/vertical_align&oldid=4913»