謝謝大家的指點 下面是最新試玩的結果 /*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://webptt.com/m.aspx?n=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