Re: [問題] 上下置中

作者: yshlptt (小y)   2014-08-19 16:59:42
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;
: }
: 謝謝
作者: tomin (Schrödinger's cat)   2014-08-19 18:43:00
推 清楚
作者: sycc (100倍返しだ!)   2014-08-20 23:05:00
方法一第一次聽到,長知識推。請問缺點是什麼?

Links booklink

Contact Us: admin [ a t ] ucptt.com