如何讓圖片垂直置中?
<div style="float: right; line-height: 35px">
<img style="cursor: pointer; vertical-align: middle" src="/media/img/go_to_see.png">
</div>
找了這個問題的解答好一陣子, 結果今天試出來了...
要訣在於, parent div 的 line-height 要設, 而children (img) 的vertical-align 同時也要設
參考: http://blog.xuite.net/vexed/tech/22551671-%E5%8F%AA%E7%94%A8+CSS+%E8%AE%93%E5%9C%96%E7%89%87%E5%9C%A8+DIV+%E4%B8%AD%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E9%83%BD%E7%BD%AE%E4%B8%AD
2012/10/1 --> 答案好像不如上述那麼簡單, 要上面整個文章讀過一次, 照樣設定才會有效(為了兼容幾乎所有瀏覽器, 包括IE 5.0 開始, 若沒有的話, 應該 display: table-cell; 然後line-height 設一設應該就OK了)
別忘了, 要讓IE 也乖乖聽話的話, 文件模式要設為:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2013/2/25 補:
注意, 要讓文件乖乖聽話, doctype 不能亂設, 一定要 strict 模式才行
留言
張貼留言