div中让图片和文字在同一条水平线垂直居中（代码全部有注释）

最直接的办法其实是使用vertical-align这个属性，但由于我是半路出家学的css，很多基础知识掌握并不扎实，所以很多时候用vertical-align这个属性就会失效。于是在任务进行的过程中，我总结了一套万能的图片、文字垂直居中方法，记录在这里（脑子不好，为了便于以后使用时理解代码，在写demo时对所有代码进行了注释）

在线演示：DIV中的图片文字垂直居中Demo

代码说明：（图片就用的codepen上随手找的图片，不知道会不会哪天突然失效）

HTML代码：

 <div>

   <img src="https://cdn4.buysellads.net/uu/1/62837/1587604228-cp-80x80.png" >

   <span>投票</span>

 </div>

CSS代码：

div{
  width:110px;  /*div的宽度，根据需要进行设定即可*/
  height:48px;  /*div的高度，根据需要进行设定即可，最好明确设置，后面要用，不明确设置也可以，就是后面调试居中比较麻烦*/
  background-color:rgba(163,223,255,0.8);  /*div的背景颜色，根据需要进行设定即可，这里是为了更好地显示居中效果才设置的背景颜色*/
}
img{
  width:28px;  /*div中图片的宽度，根据需要进行设定即可*/
  height:28px;  /*div中图片的高度，根据需要进行设定即可*/
  padding-top:10px;  /*设置图片上边距，重点：上边距=(div的高度-图片的高度)/2 这是保证垂直居中的关键之一*/
  padding-left:20px;  /*设置图片左边距，根据需要进行设定即可*/
  display:inline-block;  /*设置图片为块级元素(方便后面浮动)，必须要有，否则会出现图片、文字无法在同一条直线上居中*/
  float:left;  /*设置图片左浮动，必须要有，否则会出现图片、文字无法在同一条直线上居中*/
}
span{
  font-size:16px;  /*设置文字字体大小，根据需要进行设定即可*/
  display:inline-block;  /*设置文字所在的span标签为块级元素(方便后面浮动)，必须要有，否则会出现图片、文字无法在同一条直线上居中*/
  float:left;  /*设置文字所在的span标签左浮动，必须要有，否则会出现图片、文字无法在同一条直线上居中*/
  line-height:48px;  /*设置文字行距，如果是单行文字，要实现居中的话，这里必须将行距设置为和外层div同样的高度*/
  padding-left:5px;  /*设置文字左边距，用于控制文字和图片的距离，根据需要进行设定即可*/
}