<style?type="text/css">
div
{
height:40px;
border:?1px?solid?#000000;
}
img
{
width:?200px;
height:?150px;
}
#base
{
vertical-align:?baseline;
}
#sub
{
vertical-align:?sub;
font-size:?0.5em;
}
#sup
{
vertical-align:?super;
font-size:?0.5em;
}
#top
{
vertical-align:?top;
}
#t-top
{
vertical-align:?text-top;
}
#mid
{
vertical-align:?middle;
}
#bot
{
vertical-align:?bottom;
}
#b-bot
{
vertical-align:?text-bottom;
}
</style>
</head>
<body>
<center>
<font?size="5"?color="red">
vertical-align:垂直對齊的應用效果
</font>
<table?border="4"?height="200px">
<tr?bgcolor="lightgreen"?align="center">
????<td>
???? 設置vertical-align屬性
????</td>
????<td>
???? 顯示結果
????</td>
?????<td>
???? 設置vertical-align屬性
????</td>
????<td>
???? 顯示結果
????</td>
</tr>
<tr>
<td>vertical-align:sub</td>
<td>c+o<font?id="sub">2</font>->co<font?id="sub">2</font></td>
<td>vertical-align:super</td>
<td>a<font?id="sup">2</font>+b<font?id="sup">2</font>=c<font?id="sup">2</font></td>
</tr>
????????<tr>
???????? <td?id="top">vertical-align:?top</td>
???????? <td?id="top"><img?src="1.jpg"></td>
???????? <td?id="t-top">vertical-align:?text-top</td>
???????? <td?id="t-top"><img?src="1.jpg"></td>
????????</tr>
????????<tr>
???????? <td?id="mid">vertical-align:?middle</td>
???????? <td?id="mid"><img?src="1.jpg"></td>
???????? <td?id="base">vertical-align:?baseline</td>
???????? <td?id="base"><img?src="1.jpg"></td>
????????</tr>
????????<tr>
???????? <td?id="bot">vertical-align:?bottom</td>
???????? <td?id="bot"><img?src="1.jpg"></td>
???????? <td?id="t-bot">vertical-align:?text-bottom</td>
???????? <td?id="t-bot"><img?src="1.jpg"></td>
????????</tr>
</table>
</center>
vertical-align:text-top(bottm)這兩個怎么理解？
錯過了年華
2016-11-27 22:56:09
