类似微博大v的文字居中，v根据文字字数而改变做法

首先来看一下需求

我们要实现类似这种的微博大v，文字要居中，并且图标v要随文字字数改变而跟随

按照一般的定位方法是比较难以实现这种自适应布局，所以我们要用到 绝对定位 的一个非定位特性

w3c对于position的解释是

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

以及这篇文章里面的介绍 absolute绝对定位的非绝对定位用法

大致可以了解到：绝对定位 absolute 他的特性就像宽高都脱离文档流的浮动一样，当他设置了 position:absolute; 但没有设置 top,left 等值的时候，他可以当作一个高级版的浮动来用，来实现一些自适应布局，利用这个特性，我们微博大v的需求就可以做了。

利用 absolute 的类浮动特性，将 文字和图标 用行内元素 span和img 包裹，text-align: center 居中文字，给img 单独设置 position:absolute; 不给 top left，图标就会由于浮动而紧挨在文字旁边。

<div style="text-align: center">

    <span> 文字文字 </span>
    <img src="/123.png" style="position:absolute">

</div>

关键：

    将名字写成span

    给 v 加 position: absolute; 

扩展用法

类似的像

这种功能的图片也能用同样的方法实现

将图片设置 绝对定位属性，右边的两行文字因为图片的浮动，就只需要设置margin或者padding就能实现这种效果，不过因为这个图片的位置在最左边，实际上也能通过浮动达到相同的效果。