谢谢大家的指点 下面是最新试玩的结果 /*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/cn.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