图片（inline-block）与文字同一个盒子内，让文字垂直居中方法（img设置vertical-align:middle）

<div id="box">
        <img src="http://img.ads.csdn.net/2017/201708141749155149.png" alt="">
        <span>11111</span>
    </div>

css

#box{
			background: red;
			height: 100px;
			line-height: 100px;
			 align-items: center;/*垂直轴居中*/

		}
		#box >img{
			width: 60%;
			display: inline-block;
			vertical-align:middle;　　//把此元素放置在父元素的中部。
		}
		#box span{
			
		}

 

对于居中是有各种奇怪的因素，如不具备bfc而出现的各种奇怪的现象

vertical-align 属性设置元素的垂直对齐方式。