一、目標
目標實現如下效果：
二、完成
1、分析
這個效果看起來很簡單，實際上可能並不那么容易實現。
首先是全部東西都居中顯示，除了“親愛的starof”這個稱呼的地方。這也是難點，也是本文要重點說的地方。
開始我嘗試將“ 親愛的starof:” 和下面那段文字分別獨立成兩個段落，一個居左，一個居左。結果當然是不理想的，因為“親愛的starof”部分其實並不是真正意義上的居左，而是以下面這段文字作為參考的一個居左。現在說說我的實現方法。首先全部文字都用<p>包裹，inline-block顯示，然后絕對定位。具體過程如下，各位如有不同見解或實現方式歡迎指點討論。
2、實現
第一步，代碼基礎框架如下
全部文字都放在一個<p>標簽內。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>demo of starof</title> <style> .top{ margin:0 5%; text-align:center; } .top span{ color:red; } </style> </head> <body> <div class="top"> <p class="first"> <span> 親愛的starof:</span><br/> 恭喜您獲得快速升級年費資格，您僅需開通<span>4個月</span>會員，即可自動升級為尊貴的年費會員，差額部分享受<span>8折優惠</span>哦! </p> </div> </body> </html>
此時效果：
下圖為了方便后面對比。
第二步，設在<p>的display為inline-block,實現居中。
因為p本身是個塊級元素，我們下一步要以它為參照實現定位。所以需要設在display屬性讓它大小根據內容而定，同時實現居中。
增加下面css樣式。
.top .first{ display:inline-block; position:relative; }
效果如下
看起來和上面很像，實際上已經發生了本質變化。
第三步，通過絕對定位實現目標效果。
增加下面css樣式。<p>相對定位作為參照，第一個<span>絕對定位。
.top .first{... position:relative; } .first span:first-child{ position:absolute; }
此時效果如下：
如果覺得效果不理想，可通過left，top稍微調整一下。
.first span:first-child{ position:absolute; left:0; top:-5px; }
這就是我要的效果
第四步，完成其他部分
剩下的就都很簡單了，完整代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>demo of starof</title> <style> .top{ margin:0 5%; text-align:center; } .top span{ color:red; } .top .first{ display:inline-block; position:relative; } .first span:first-child{ position:absolute; left:0; top:-5px; } .top input{ width:20%; padding:8px 20px; margin:5px; background-color:#e9322a; color:white; font-size:18px; border:1px solid #666; border-radius:5px; } </style> </head> <body> <div class="top"> <p class="first"> <span> 親愛的starof:</span><br/> 恭喜您獲得快速升級年費資格，您僅需開通<span>4個月</span>會員，即可自動升級為尊貴的年費會員，差額部分享受<span>8折優惠</span>哦! </p> <div> <input type="button" value="立即升級"/> <p>已有<span>23919</span>人享此優惠</p> </div> </div> </body> </html>
3、瀏覽器兼容性
IE6，IE7不完全支持display:inline-block的寫法。具體是對默認是display:block的元素設置display:inline-block無效，對默認是display:inline的元素設置display:inline-block可生效。所以要兼容IE6，IE7可替換標簽。
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4832947.html有問題歡迎與我討論，共同進步。