首页 > 代码库 > CSS3----vertical-align（文本垂直对齐方式）
CSS3----vertical-align（文本垂直对齐方式）
一、代码：
<!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="http://www.mamicode.com/index.html"></a></h2>
</div>
<div class="container">
<div class = ‘d1‘><img src="http://www.mamicode.com/imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d2‘><img src="http://www.mamicode.com/imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d3‘><img src="http://www.mamicode.com/imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d4‘><img src="http://www.mamicode.com/imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d5‘><img src="http://www.mamicode.com/imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d6‘><img src="http://www.mamicode.com/imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
<div class = ‘d7‘><img src="http://www.mamicode.com/imgs/bg.png"><span>Sunlike阿理旺旺</span></div>
</div>
</body>
</html>
二、效果
结论：
结论：
结论：
结论：
结论：
结论：
结论：
CSS3----vertical-align（文本垂直对齐方式）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。