css 如何使图片与文字在div中居中展示

实现的效果

完整代码

<div style="border:1px solid yellow;color:yellow;text-align:center">
     <img src="@/common/images/logo.png" style="width:44px;" alt="">
      <span style="position:absolute;margin-top:10px;margin-left:5px;">小码音乐</span>
      <span style="color:#ccc;position:relative;bottom:7px;left:5px">small ma music</span>
  </div>

**

讲解实现逻辑

**
1.html片段

<div style="border:1px solid yellow;color:yellow">
    <img src="@/common/images/logo.png" style="width:44px;" alt="">
    <span >小码音乐</span>
    <span style="color:#ccc">small ma music</span>
</div>

2.界面展示

3.原因分析：
由于img和span标签都是行内标签
4.解决办法
所以，可以使用div的居中属性"text-align:center"

<div style="border:1px solid yellow;color:yellow;text-align:center"></div>

5.如何让文字提上去呢
分析过程
小码音乐和small ma music并列展示，可通过定位实现
由于小码音乐和small ma music，后者更长，考虑到居中展示后，左右边距问题；
遂将小码音乐使用绝对定位，旨在让其脱离文档（腾出原来占用的位置），这样，div的"text-align:center"属性在计算左右间距时，就只计算待居中元素的宽度为：图片宽度+small ma music宽度，不再将小码音乐占用宽度计算在内。（意思就是小码音乐脱离文档流，只有图片和small ma music占用空间去居中）
小码音乐

如何使小码音乐向右侧移动，扩大与图片的间距？
通过marign-left属性实现。
注意：不能使用left属性！
因为绝对定位，是基于父级块级元素的左上角位置进行的定位，如果定义left属性，结果是酱紫的！

　　并且，当margin-left和left同时存在时，前者失效。
　　如何使小码音乐向下侧移动？
　　这个时候，使用top属性，或者margin-top属性，都可以实现效果。
　　如何使small ma music 向上、向右移动？
　　向上移动不能通过margin-top、margin-bottom、pandding-top、pandding-bottom来实现；
左右移动却可以通过padding来实现效果。

这是因为行内元素，只能修改左右边距，不能调整上下边距
因此，调整上下位置，可通过定位来实现！
由于该元素不能再脱离文档了，因为这会影响到整体居中效果，所以只能使用相对定位来实现。
最终代码

<div style="border:1px solid yellow;color:yellow;text-align:center">
     <img src="@/common/images/logo.png" style="width:44px;" alt="">
      <span style="position:absolute;margin-top:10px;margin-left:5px;">小码音乐</span>
      <span style="color:#ccc;position:relative;bottom:7px;left:5px">small ma music</span>
  </div>