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.效果展示
