为什么我的表格的垂直对齐方式不起作用，段落垂直对齐方式也对齐不了
<!DOCTYPE html>
<html>
<head>
<title>verticlo-align</title>
<style type="text/css">
p,h1{background-color:gray; height:80px; font-size:20px;}
span{color:red;font-size:14px;}
.sub{vertical-align:sub;}
.super{vertical-align:super;}
.baseline{vertical-align: baseline;}
.top{vertical-align:top;}
.text-top{vertical-align:text-top;}
.top{vertical-align:top;}
.middle{vertical-align:middle;}
.text-bottom{vertical-align:text-bottom;}
.bottom{vertical-align:bottom;}
.one{height:100px;width:50px;}
</style>
</head>
<body>
<h1>sub和<span class="super">super元素的应用</span></h1><!--sub super移动的距离由浏览器决定-->
<h1 class="sub">这两个元素对块元素<span>不起作用</span></h1>
<h1>sub是下标<span class="sub">super是上标</span></h1>
<br/>
<b>---- baseline\top\text-top\middle\bottom\text-bottom -----</b><!--移动距离由浏览器决定也可以应用在图片上-->
<p>
css层叠样式表
<span>(Cascading Style sheets)</span>
<img src="">
</p>
<p>
css层叠样式表
<span class="baseline">基线baseline</span>
<img src="" class="baseline">
</p>
<p>
css层叠样式表
<span class="top">顶端对齐top</span>
<img src="logo.png">
</p>
<p>
css层叠样式表
<span class="text-top">文本顶端对齐text-top</span>
<img src="logo.png">
</p>
<p>
css层叠样式表
<span class="middle">中端对齐middle</span>
<img src="logo.png">
</p>
<p>
css层叠样式表
<span class="text-bottom">文字低端对齐</span>
<img src="logo.png">
</p>
<p>
css层叠样式表
<span class="bottom">低端对齐top</span>
<img src="logo.png">
</p>
<p>
css层叠样式表
<span style="vertical-align:-15px">长度值</span><!--长度值可以正负-->
<img src="logo.png">
</p>
<p>
css层叠样式表
<span style="vertical-align:15%">百分比</span>
<img src="logo.png">
</p>
<b>--应用在表格上--</b>
<table border="1px" cellspacing="0" calss="one">
<tr>
<td class="top"><span>top</span></td>
</tr>
<tr>
<td class="middle"><span>middle</span></td>
</tr>
<tr>
<td class="bottom"><span>bottom</span></td>
</tr>
</table>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星