當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;
}

在這裏插入圖片描述

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