css图文混合垂直居中

发现图文混合垂直居中，单纯使用 line-height，height 相等，已经没什么效果了，如下面元素，只有加上使用;display:flex;，效果才出来了

<div style="line-height: 40px;height: 40px;display:flex;">

<span style="margin:auto 10px auto 10px;">商品图片同步在线超市

</span>

<inline-x-switch v-model="syncmarket"></inline-x-switch>

</div>

效果

文字已经垂直居中了。

如果不使用dispaly:flex,就是这样，文字靠在下面，跟右边图片差得太远。

另外使用绝对定位，top:50%,是可以达到垂直居中的效果的，感觉不好用，还得设置left，right等坐标，定得太死了。