一、代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本垂直对齐方式vertical-align</title>
<style type="text/css">
.head{
margin: 0 0 0 100px;
}
.container{
margin: 0 0 0 100px;
}
.container div{
width: 600px;
height: 300px;
margin: 0 0 300px 0;
border: 1px solid red;
}
img{
width: 300px;
border: 1px solid red;
}
.container div span{
border: 1px solid gray;
font-size: 30px;
display: inline-block;
height: 229px;
}
.container .d1 span{
vertical-align: baseline;
}
.container .d2 span{
vertical-align: sub;
}
.container .d3 span{
vertical-align: super;
}
.container .d4 span{
vertical-align: bottom;
}
.container .d5 span{
vertical-align: text-bottom;
}
.container .d6 span{
vertical-align: top;
}
.container .d7 span{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="head">
<h1>文本垂直对齐方式vertical-align</h1>
<h2>首页<a href="index.html"></a></h2>
</div>
<div class="container">
<div class = ‘d1‘><img src="imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d2‘><img src="imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d3‘><img src="imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d4‘><img src="imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d5‘><img src="imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d6‘><img src="imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d7‘><img src="imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
</div>
</body>
</html>
二、效果
结论：
结论：
结论：
结论：
结论：
结论：
结论：
时间： 2024-12-18 04:12:45