作者yshlptt (小y)
看板Web_Design
标题Re: [问题] 上下置中
时间Thu Aug 21 17:05:21 2014
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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1408611930.A.692.html
※ 编辑: yshlptt (118.163.10.190), 08/21/2014 17:14:38
1F：推 leochen0818: 总而言之就是，如果是段落式的标签，宽度通常都会继 08/22 10:24
2F：→ leochen0818: 承，但是高度不会，所以每一层里的元素，高度最好都 08/22 10:25
3F：→ leochen0818: 说清楚会好一点，然後测试的时候请一个阶段一个阶段 08/22 10:26
4F：→ leochen0818: 进行测试，才会知道自己到底哪里出了问题，不要每次 08/22 10:26
5F：→ leochen0818: 都霹雳啪啦打了一大串才再来回头找问题，很没效率 08/22 10:26
6F：推 chigi: 推浏览器的除错工具 08/22 11:55