Re: [問題] 上下置中

[yshlptt (小y)]

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/

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.10.190
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1408611930.A.692.html
※ 編輯: yshlptt (118.163.10.190), 08/21/2014 17:14:38
推 leochen0818: 總而言之就是，如果是段落式的標籤，寬度通常都會繼
→ leochen0818: 承，但是高度不會，所以每一層裡的元素，高度最好都
→ leochen0818: 說清楚會好一點，然後測試的時候請一個階段一個階段
→ leochen0818: 進行測試，才會知道自己到底哪裡出了問題，不要每次
→ leochen0818: 都霹靂啪啦打了一大串才再來回頭找問題，很沒效率
推 chigi: 推瀏覽器的除錯工具