vertical-align行内元素垂直对齐方式的实用、图片询问有个小空白的解决

文档：https://www.w3school.com.cn/css/pr_pos_vertical-align.asp

<style>
	.inline1 img{
		width: 50px;
		height: 50px;
		border-radius:25px;

		/*vertical-align：baseline top bottom middle其它参考文档；让行内元素对齐，可直接对齐图片，文字等；
		其中middle 会让行内元素垂直居中对齐如果非行内元素，只要给它加个display:inline;即可*/
		vertical-align:middle;
	}
	.inline1 div{
		display: inline;
	}


</style>
<body>
	<div class="inline1">
		<img src="./imgs/1.jpg"><div>你好忠心耿耿</div>
	</div>

	<div class="inline2">
		<img src="./imgs/1.jpg" style="vertical-align: middle;">你好忠心耿耿
	</div>

效果：

图片底部小空白

图片如果在外面的div加个边框，底部会有个奇怪的小空白
原因：图片是行内元素它的对齐方式默认为vertical-align:baseline;基线对齐
解决：只要把图片的vertical-align设置为任一个非baseline如bottom,top,middle等即可解决
解决2：直接把dispaly:block;即可，推荐方式1

posted @ 2020-09-20 16:30  晨光曦微  阅读(141)  评论(0)  编辑  收藏  举报