当img和span一行,设置垂直居中

当img和span标签放在同一行时,应该如何设置,使它们在该行垂直居中?

	<style type="text/css">
		.box{
			width: 100%;
			background-color: #ccc;
		}
		.box img{
			width: 40px;
			height: 40px;
		}
		.box span{
			background-color: lightblue;
		}
	</style>

<body>
	<div class="box">
		<img src="logo.png">
		<span>这里是span标签</span>
	</div>
</body>

效果:
普通状态下
给img和span样式加上:

vertical-align:middle;

即可。

.box img{
	width: 40px;
	height: 40px;
	vertical-align:middle;
}
.box span{
	background-color: lightblue;
	vertical-align:middle;
}

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章