文字旁邊搭配圖片時，發現圖片比文字靠上，原來默認的情況是圖片頂對齊而文字底對齊，通過設置css屬性可以使得圖片與文字對齊。
默認的情況是圖片頂對齊而文字底對齊，通過設置css屬性可以使得圖片與文字對齊，接下來為大家詳細介紹下設置各對象的vertical-align屬性，感興趣的朋友可以參考下哈
文字旁邊搭配圖片時，發現圖片比文字靠上，原來默認的情況是圖片頂對齊而文字底對齊，通過設置css屬性可以使得圖片與文字對齊。
設置各對象的vertical-align屬性，屬性說明：
baseline－將支持valign特性的對象的內容與基線對齊
sub－垂直對齊文本的下標
super－垂直對齊文本的上標
top－將支持valign特性的對象的內容與對象頂端對齊
text-top－將支持valign特性的對象的文本與對象頂端對齊
middle－將支持valign特性的對象的內容與對象中部對齊
bottom－將支持valign特性的對象的文本與對象底端對齊
text-bottom－將支持valign特性的對象的文本與對象頂端對齊
在此設置為text-bottom即可實現圖片與文字位於同一水平線上，好看多了
如下：其他自己改
<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目標任務</span>
實現圖片於文字的底端對齊
最近在使用3個span（或div）制作帶圓角邊框的按鈕時，按照常識，把span的display設置成inline-block，這樣就可以設置span的width和height了，很爽的~
可是當我在中間的span寫上文字的時候，神奇的事情發生了：
是的，寫上字的那個span掉下來了，掉落，排版錯位，很惡心的東西！使用Chrome的開發者工具查看，css和盒模型沒有半點問題，郁悶中……
仔細觀察發現，掉落的高度貌似跟文字的高度差不多，試了下，如果把文字字體加大，發現變成這樣了：
是的，有文字span向上移動了一些！也就是說，掉落的那個、有文字的span的掉落程度跟它上面的文字的大小有關系，文字的大小代表什么？大號文字的重心明顯比小號文字的重心高，於是把字體改回原來的樣子，然后試着使用vertical-align直接修改文字的重心位置為：
vertical-aligntop
得到這樣的結果：
成功了！有文字的span跟沒有文字的span對齊啦！
原因：
很明顯是vertical-align設置錯誤的問題，谷歌了下vertical-align的用法，找到如下鏈接：
CSS屬性Vertical Align使用方法講解
- http://www.jzxue.com/wangyesheji/css/201006/11-3937.html
大體意思是，vertical-align只用在display屬性inline或inline-block的情況下才能使用，默認為baseline，就是“display屬性inline或inline-block”的控件的底端跟文字的baseline（基線）對齊：
所以，在設置vertical-align之前，左右兩個沒有文字的span的底端跟中間那個有文字的span里的文字的基線對齊了，所以中間那個span就下降了文字高度的尺寸。而改變文字的尺寸后，基線隨之被提高，然后中間有文字的那個span也就跟着上去了。設置vertical-align:top后，左右兩邊的span的top跟中間span的top對齊，問題解決了~
默認的baseline是文字的底端，bottom是包文字的容器的底端。
移除空格的方法
元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：
<div class="space">
<a href="##">
惆悵</a><a href="##">
淡定</a><a href="##">
熱血</a>
</div>
或者是：
<div class="space">
<a href="##">惆悵</a
><a href="##">淡定</a
><a href="##">熱血</a>
</div>
或者是借助HTML注釋：
<div class="space">
<a href="##">惆悵</a><!--
--><a href="##">淡定</a><!--
--><a href="##">熱血</a>
</div>
或者直接可以用float來解決。