CSS Twitter Bootstrap 网格垂直对齐底部
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12847103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap grid Vertical align bottom
提问by John Quinones
So I have been at this what seems forever and can't figure it out. I have a grid with content of different heights due to images, and I am trying to get them all to align bottom but have had no luck. I have tried what I have seen on here, but nope, commented in my jsfiddle
所以我一直在这似乎永远无法弄清楚。由于图像,我有一个包含不同高度内容的网格,我试图让它们全部对齐底部但没有运气。我已经尝试了我在这里看到的内容,但是没有,在我的 jsfiddle 中评论
回答by tuff
Here's an updated version of your fiddle with (what I think) you want: http://jsfiddle.net/qXT6K/34/
这是您想要的(我认为的)小提琴的更新版本:http: //jsfiddle.net/qXT6K/34/
You were on the right track with position: absolute; bottom: 0;
; it's just a matter of getting the offsets right.
你在正确的轨道上position: absolute; bottom: 0;
;这只是让偏移量正确的问题。
I have given the container div a height just to show the bottom-alignment. You do need to give it a height, otherwise with all its children absolutely positioned, it will default to 0.
我给容器 div 一个高度只是为了显示底部对齐。你确实需要给它一个高度,否则它的所有孩子绝对定位,它会默认为 0。
To center the container div (and so have all its children appear centered), you need to use margin-left: auto
and margin-right: auto
(shorthand margin: 0 auto
), plus a set width on the div (applied through the class span8
in my example), plus removal of the float
property which is bundled into all span-
classed elements. You also need padding-right: 40px
to center the container's children, accounting for the margin-left: 20px
which is also applied to .span-
s.
要使容器 div 居中(使其所有子项都居中),您需要使用margin-left: auto
和margin-right: auto
(简写margin: 0 auto
),加上 div 上的设置宽度(span8
在我的示例中通过类应用),加上删除float
捆绑的属性进入所有span-
分类元素。您还需要padding-right: 40px
将容器的子项居中,以考虑margin-left: 20px
也适用于.span-
s 的 。
回答by Deleteman
Is this what you want? http://jsfiddle.net/UxYnV/
这是你想要的吗?http://jsfiddle.net/UxYnV/
UpdateNow elements are centered: http://jsfiddle.net/UxYnV/2/
立即更新元素居中:http: //jsfiddle.net/UxYnV/2/