关于vertical-align属性

<!DOCTYPE html>
<html>
<head>
    <title>包裹性</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="div1">
        <img src="image/wumingnvlang.jpg">
    </div>
</body>
</html>

我设置了垂直对齐方式为底边对齐。为什么图片不出现在绿色矩形的位置，这个vertical-align属性作用到底是什么？

洛奇丶大 2019-09-02

源自：CSS浮动 4-4 浮动

收起

1回答

好帮手慕美回答被采纳获得+3积分 2019-09-02 17:37:23

同学，你好。同学可以将img标签放在文字标签或者设置两个img标签来设置此样式，效果会更明显。

例：

<!DOCTYPE html>
<html>
	<head>
		<title>Title</title>
		<meta charset="UTF-8">
		<style type="text/css">		
			.main {
				width: 600px;
				margin: 50px auto;
			}			
			.main .box1,
			.main .box2,
			.main .box3 {
				text-align: center;
				margin: auto;
				border: 3px solid black;
			}	
			.main img {
				width: 200px;
				border: 1px solid red;
			}
			.main .box1 .img1 {
				vertical-align: top
			}
			.main .box1 .img2 {
				width: 300px;
				vertical-align: top
			}
			.main .box2 .img3 {
				vertical-align: middle
			}		
			.main .box2 .img4 {
				width: 300px;
				vertical-align: middle
			}
			.main .box3 .img5 {
				vertical-align: bottom
			}			
			.main .box3 .img6 {
				width: 300px;
				vertical-align: bottom
			}
			
		</style>
	</head>

	<body>
		<div class="main">
			<div class="box1">
				<span>顶部对齐</span>
				<img class="img1" src="images/03-02.jpg" alt="">
				<img class="img2" src="images/03-02.jpg" alt="">
			</div>
			<div class="box2">
				<img class="img3" src="images/03-02.jpg" alt="">
				<span>中部对齐</span>
				<img class="img4" src="images/03-02.jpg" alt="">
			</div>
			<div class="box3">
				<img class="img5" src="images/03-02.jpg" alt="">
				<img class="img6" src="images/03-02.jpg" alt="">
				<span>底部对齐</span>
			</div>
		</div>
	</body>

</html>

效果图：