CSS在一个最小高度的容器内垂直对齐？ [英] CSS vertical align inside a min-height container?

问题描述

我一直在做很多搜索，找不到一个css解决方案来垂直对齐我的内容。

我在SO上看到的所有解决方案而谷歌的顶级文章要求我有一个固定高度的容器，内容不能超过。我不能保证，因为内容是动态生成的。

我可以做的唯一的回退工作是用JavaScript编程测量内部容器并设置边距 - 最佳。这是真正的恶心，但似乎工作的唯一途径。 ：（

）

请参阅此js小提琴

我很高兴为此忘记IE6，但需要支持IE7 +和最新的webkit + firefox ...

>

是否有人知道一个CSS唯一的解决方案？

解决方案

因为我知道绝对没有办法在IE7中只用CSS就可以完成这项工作，除非你可以使用表格。对于所有体面的浏览器和IE8，可以使用display：table-cell：

http://jsfiddle.net/hGjfY/

和

• 设置高度为200px而不是最小高度（最小高度表格单元格不支持，高度被解释为最小高度）




• 添加条件注释以仅定位到IE7，并添加min-height：200px;以及身高：自动;内部股利（高度不能按预期工作我n IE7在表格单元格中）




• 加载jQuery仅适用于IE7，或者在IE7中以非中心视图存在

I've been doing a lot of searching and can't find a css solution to vertically align my content.

All of the solutions I see here on SO and the top articles on google require that I have a fixed height container which the content cannot exceed. I cannot guarantee that as the content is dynamically generated.

The only fallback I have that I can make work is some javascript to programmatically measure the inner container and set its margin-top. This is truly icky but the only way that seems to work. :(

See this js fiddle for an example of the markup I want to style.

I am happy to forget IE6 for this, but need to support IE7+ and the latest webkit+firefox...

Is anyone aware of a CSS only solution to this?

解决方案

As far as I know there is absolutely no way to get this done in IE7 with just CSS, unless you can live with a table. For all decent browsers, and IE8, you can use display:table-cell:

http://jsfiddle.net/hGjfY/

and

• set height to 200px instead of min-height (min-height is not supported on table cells, height is interpreted as min-height)

• add conditional comment to target only IE7, and add min-height:200px; and height:auto; to the inner div (height doesn't work as expected in IE7 on table cells)

• load jQuery fix only for IE7, or live with a non-centered view in IE7

这篇关于CSS在一个最小高度的容器内垂直对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！