謝謝大家的指點
下面是最新試玩的結果
/*override bootstrap value*/
.navbar-text.pull-right { height: 100%; }
將navbar裡面每層元素都調整成 height:100%
並配合 display:table / display: table-cell
故意設定一個很高的footer EX: .navbar-fixed-bottom {height: 300px}
我終於達到垂直置中
http://jsfiddle.net/ujpv58e9/2/
但是
當我將navbar-fixed-bottom調整成較正常高度 EX: 50px
我的icon又不置中了
http://jsfiddle.net/ujpv58e9/7/
inspect element之後
暴力的將所有margin / top / padding top bottom的份調整為0px
--> "肉眼上"看起來應該是置中了
http://jsfiddle.net/ujpv58e9/6/
1.
我可以手動加減周遭幾個元素的margin / padding 等東西讓他"看起來"置中
這樣做是正確的嗎? 感覺好像比較像是"變通"
2.
每個元素的高度計算是 marging + border + padding + content
但為什麼在50px這種高度的情況下
我得將content以外的東西扒掉
vertical-align: middle; 的效果才會出現?
3.
我發現我用的px ruler (JRuler) 有個缺點:
靠近螢幕下緣，太短小東西會讀不出測量值 (讀數被推出螢幕外)
如圖 http://imgur.com/Hg2pLMT
請問大家有推薦的工具可以量測元素和元素之間的距離嗎?
還是只能用js算?
==
之前也試玩了bootstrap input-group
Ex: 一個search bar旁邊黏一個 glyphicon glyphicon-search
想將search bar的高度調高一點
而旁邊的search icon 就靠著inspect element量一量大小
手工調整margin / padding / height，讓兩者看起來同樣大小
這樣做.... 對嗎? 可靠嗎?
謝謝
※ 引述《eight0 ( )》之銘言：
: ※ 引述《yshlptt (小y)》之銘言：
: : 一、使用絕對位置定位
: : 把 container 元素設為 position: relative(或依需求設定 absolute)
: : ...
: 這個真炫，我也是第一次看到。以前也有種常見的做法是把 parent 設成
: relative，child 設 absolute，加上 top 與 margin-top 調位置。
: http://jsbin.com/notifucigedo/7/edit?html,css,output
: 缺點是要知道 child 的高度。
: 這個方法好像是之前在板上看到的，用空的行區塊原素設 height: 100% 來填滿高度。
: http://jsbin.com/peqilugomemi/1/edit?html,css,output
: 缺點就是要處理空白符，網路上也滿多討論
: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
: 個人覺得目前最好的做法還是 display: table-cell，和 Bootstrap 的
: Grid system 也能很好的配合。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 76.169.54.91
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1408870235.A.72C.html
※ 編輯: sean72 (76.169.54.91), 08/24/2014 16:50:57
※ 編輯: sean72 (76.169.54.91), 08/24/2014 16:51:53
※ 編輯: sean72 (76.169.54.91), 08/24/2014 16:53:05