類似微博大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，圖示就會由於浮動而緊挨在文字旁邊。

文字文字

關鍵：將名字寫成span

給 v 加 position: absolute;

類似的像

這種功能的也能用同樣的方法實現

將設定絕對定位屬性，右邊的兩行文字因為的浮動，就只需要設定margin或者padding就能實現這種效果，不過因為這個的位置在最左邊，實際上也能通過浮動達到相同的效果。