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