http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FCSS_Attributes_and_Javascript_Style_Properties%2Fvertical_align
HTML/CSS/CSS Attributes and Javascript Style Properties/vertical align - История изменений
2026-04-04T09:18:25Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/vertical_align&diff=4912&oldid=prev
в 09:20, 26 мая 2010
2010-05-26T09:20:59Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:20, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/vertical_align&diff=4913&oldid=prev
Admin: 1 версия
2010-05-26T08:16:07Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==vertical align: baseline==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
margin: 10px;<br />
font-size: 40px;<br />
}<br />
span {<br />
background: lightblue;<br />
}<br />
span.valign {<br />
font-size: 16px;<br />
color: white;<br />
background: steelblue;<br />
font-weight: bold;<br />
}<br />
span#baseline {<br />
vertical-align: baseline;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span><br />
This is a test. <br />
<span class="valign" id="baseline">This is a test. </span> <br />
This is a test. <br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertical align: bottom==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
font-family: sans-serif;<br />
width: 200px;<br />
margin: 10px;<br />
padding: 10px;<br />
border: 1px solid black;<br />
font-size: 16px;<br />
}<br />
img {<br />
vertical-align: bottom;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
The bottom of the image <img src="http://www.wbex.ru/style/logo.png"/> is aligned vertically with the bottom of the line box.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
=="vertical-align" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<body><br />
<table width="70%" border="1" cellspacing="5" cellpadding="5"><br />
<tr height="50"><br />
<td>Cell 1 content</td><br />
<td>Cell 2 content</td><br />
</tr><br />
<tr height="100" id="myT"><br />
<td><img src="http://www.wbex.ru/style/logo.png">Cell 3 text content</td><br />
<td>Cell 4 text content</td><br />
</tr><br />
</table><br />
<br><br />
<input type="button" <br />
onclick="myT.style.verticalAlign="text-top"" <br />
value="Set verticalAlign to text-top"><br />
<input type="button" <br />
onclick="myT.style.verticalAlign="text-bottom"" <br />
value="Set verticalAlign to text-bottom"><br />
<input type="button" <br />
onclick="myT.style.verticalAlign="top"" <br />
value="Set verticalAlign to top"><br />
<input type="button" <br />
onclick="myT.style.verticalAlign="bottom"" <br />
value="Set verticalAlign to bottom"><br />
<input type="button" <br />
onclick="myT.style.verticalAlign="auto"" <br />
value="Restore position"><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==vertical align: middle==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
font-family: sans-serif;<br />
width: 200px;<br />
margin: 10px;<br />
padding: 10px;<br />
border: 1px solid black;<br />
font-size: 16px;<br />
}<br />
img {<br />
vertical-align: middle;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
The image <img src="http://www.wbex.ru/style/logo.png"/> is aligned to the center of the line.<br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertical-align possible values==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>CSS Example</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
color: #000000;<br />
background-color: #ffffff;<br />
font-family: arial, verdana, sans-serif;<br />
font-size: 12px;<br />
}<br />
td {<br />
border-style: solid;<br />
border-width: 1px;<br />
border-color: #000000;<br />
}<br />
td.none {<br />
border-style: none;<br />
}<br />
.plain {<br />
color: #FF0000;<br />
}<br />
.baseline {<br />
vertical-align: baseline;<br />
}<br />
.sub {<br />
vertical-align: sub;<br />
}<br />
.super {<br />
vertical-align: super;<br />
}<br />
.top {<br />
vertical-align: top;<br />
}<br />
.texttop {<br />
vertical-align: text-top;<br />
}<br />
.middle {<br />
vertical-align: middle;<br />
}<br />
.bottom {<br />
vertical-align: bottom;<br />
}<br />
.textbottom {<br />
vertical-align: text-bottom;<br />
}<br />
.oneHundredPercent {<br />
vertical-align: 100%;<br />
}<br />
.fiftyPercent {<br />
vertical-align: 50%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>vertical-align</h1><br />
<table><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="baseline">baseline</span><img class="baseline" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="sub">sub</span><img class="sub" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="super">super</span><img class="super" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="top">top</span><img class="top" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="texttop">texttop</span><img class="texttop" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="middle">middle</span><img class="middle" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="bottom">bottom</span><img class="bottom" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="textbottom">textbottom</span><img class="textbottom" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="oneHundredPercent">100%</span><img class="100percent" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
<tr><td class="none">&nbsp;</td></tr><br />
<tr><td><br />
<span class="plain">Plain text</span> <span class="fiftyPercent">50%</span><img class="50percent" src="images/block.gif" width="50" height="50" alt="block" /><br />
</td></tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertical-align: sub==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css"><br />
.g1 { <br />
font: 0.6em/1 Georgia, serif;<br />
vertical-align: sub;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p>before span<span class="g1">g1</span> <strong>0.6em Georgia</strong><br />
</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertical-align: super==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css"><br />
.g1 { <br />
font: 0.6em/1 Georgia, serif;<br />
vertical-align: super;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<p>before span<span class="g1">g1</span> <strong>0.6em </strong><br />
</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertical-align: text-bottom==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
margin: 10px;<br />
font-size: 40px;<br />
}<br />
span {<br />
background: lightblue;<br />
}<br />
span#text-bottom {<br />
font-size: 16px;<br />
color: white;<br />
background: pink;<br />
font-weight: bold;<br />
vertical-align: text-bottom;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span><br />
A<span id="text-bottom">A</span>A<br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertical-align: text-top==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
margin: 10px;<br />
font-size: 40px;<br />
}<br />
span {<br />
background: lightblue;<br />
}<br />
span.valign {<br />
font-size: 16px;<br />
color: white;<br />
background: steelblue;<br />
font-weight: bold;<br />
}<br />
span#text-top {<br />
vertical-align: text-top; <br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span><br />
asdf <br />
<span class="valign" id="text-top">asdf</span> <br />
asdf<br />
</span><br />
</p><br />
</body><br />
</html><br />
</source></div>
Admin