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

 

1.情景展示

　　如何将图片与文字在div中一起居中展示？

　　HTML片段

<div style="background: #fff;padding-top: 5px;border:1px solid red;">
    <img src="C:\Users\Marydon\Desktop\head_no.jpg" style="border-radius: 60px;width: 80px;"/>
    <span style="font-size: 20px;">Marydon</span>
    <span style="color: grey;font-size: 18px;">12345678900</span>
</div>

　　界面展示

2.原因分析

　　由于img和span标签都是行内标签

3.解决方案

　　所以，可以使用div的居中属性"align:center"

<div style="background: #fff;padding-top: 5px;border:1px solid red;" align="center">

4.拓展

　　如何使Marydon提上去？

　　分析过程：

　　Marydon和12345678900并列展示，可通过定位实现；

　　由于Marydon和12345678900，后者更长，考虑到居中展示后，左右边距问题；

　　遂将Marydon使用绝对定位，旨在让其脱离文档（腾出原来占用的位置），这样，

　　div的"align:center"属性在计算左右间距时，就只计算待居中元素的宽度为：图片宽度+12345678900宽度，不再将Marydon占用宽度计算在内。

<span style="font-size: 20px;position: absolute;">Marydon</span>

　　如何使Marydon向右侧移动，扩大与图片的间距？

　　通过marign-left属性实现。

不能使用left属性！

　　因为绝对定位，是基于父级块级元素的左上角位置进行的定位，如果定义left属性，结果是酱紫的！

　　并且，当margin-left和left同时存在时，前者失效。

　　如何使Marydon向下侧移动？

　　这个时候，使用top属性，或者margin-top属性，都可以实现效果。

　　如何使12345678900向上、向右移动？

　　向上移动不能通过margin-top、margin-bottom、pandding-top、pandding-bottom来实现；

　　左右移动却可以通过padding来实现效果。

行内元素，只能修改左右边距，不能调整上下边距。

　　因此，调整上下位置，可通过定位来实现！

　　由于该元素不能再脱离文档了，因为这会影响到整体居中效果，所以只能使用相对定位来实现。

　　最终代码

<div style="background: #fff;padding-top: 5px;border:1px solid red;" align="center">
    <img src="C:\Users\Marydon\Desktop\head_no.jpg" style="border-radius: 60px;width: 80px;"/>
    <span style="position: absolute; margin-top: 14px;margin-left: 10px;font-size: 20px;">Marydon</span>
    <span style="position: relative;bottom: 14px;left: 10px;color: grey;font-size: 18px;">12345678900</span>
</div>

5.效果展示　　

 

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

作者：Marydon