http://jsfiddle.net/953ey9eb/11/
一、.container 拼錯拼成 .contianer
二、pull right 先拿掉
三、.my-container 高度也要是 100%
到這一步應該就垂直置中了
四、可以用 text-align 靠右對齊
但考慮應該還會有其它元素要一起排列,
如果有的要靠左有的要靠右,可能要在 a 標籤上動手腳,
可以用 float: left; 和 float: right;
五、建議學著使用瀏覽器除錯工具,
上面這些問題透過除錯工具很容易可以找出來
※ 引述《sean72 (.)》之銘言:
: 我了解yshlptt版友的第二個例子給的程式
: 接著想套在自己的練習上面
: 卻怎樣也無法達成效果
: 例如 (故意將navbar height改成80px)
: http://jsfiddle.net/953ey9eb/10/
: 問題:
: 1.
: .navbar-fixed-bottom{
: height: 80px;
: }
: 為什麼 google chrome element inspector 告訴我container height: 62px
: 況且我也設定了 .container height:100%
: contianer應該要和父元素的高度相等才對吧?
: 2.
: 我也試過將 .navbar-text pull-right 移除
: navbar-fixed-bottom > container > my-container > my-content
: 失敗
: 3.
: 請問我該怎麼做才能夠將這個social icon放置在bootstrap container
: 靠右置中
: 謝謝
: ※ 引述《yshlptt (小y)》之銘言:
: : Hi,
: : 我目前知道兩種可以把區塊垂直置中的方法,
: : 兩種方式各有好壞,請自行依排板需求選擇
: : 一、使用絕對位置定位
: : 把 container 元素設為 position: relative(或依需求設定 absolute)
: : 再把內容元素設定為 position: absolute,
: : 並加上 margin: auto; top: 0; bottom: 0; 這三組設定即可
: : 範例:
: : http://jsfiddle.net/elin/ug3L3ut0/
: : 二、使用 display: table-cell
: : 這個作法要多包一層 tag,不過 CSS 設定相對簡單一些,
: : 簡單來說就是在最外層設定 display: table,
: : 第二層設定 display: table-cell; vertical-align: middle;
: : 這樣一來內容元素就會垂直置中
: : 範例:
: : http://jsfiddle.net/elin/4zprbaq5/