作者sean72 (.)
看板Web_Design
標題Re: [問題] 上下置中
時間Thu Aug 21 16:47:02 2014
我了解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 > a
失敗
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/
: ※ 引述《sean72 (.)》之銘言：
: : http://jsbin.com/notifucigedo/4/edit?html,css,output
: : 隨意用了bootstrap做了一個footer
: : 如果我故意將.footer height調成150px
: : 我該如何將.navbar-text的放在footer上下的中央?
: : 為什麼我下面的css不起做用呢?
: : .footer-container{
: : vertical-align: middle;
: : }
: : 謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 76.169.54.91
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1408610826.A.3F4.html
※ 編輯: sean72 (76.169.54.91), 08/21/2014 16:48:13
※ 編輯: sean72 (76.169.54.91), 08/21/2014 16:50:03
※ 編輯: sean72 (76.169.54.91), 08/21/2014 17:00:18