css - 如果高度太小，垂直居中元素并切换到顶部对齐

Question

我一直在试图找到这个问题的答案，但我发现的只是在讨论垂直居中元素。

我想要做的是垂直居中一个 div，我知道如何用 css 来做。问题是如果高度太小，它仍然会居中并切断顶部和底部。

这是我的意思的演示：http: //jsfiddle.net/reitermarkus/23B43/
全屏演示： http: //fiddle.jshell.net/reitermarkus/23B43/show/light/

如果高度太小，你能告诉我如何将它与顶部对齐吗？最好没有JS。

谢谢你，
马库斯

Answer 1

您可以确定高度是否低于所需最小值的唯一方法是通过 JS：

    var el = document.getElementById('id');   
    var el_height = el.offsetHeight;

    if(el_height < min_height){
    //apply class or inline style
    el.className = 'align_top';
    }

显然，您需要定义 min_height 变量。此外，对于 DOM 操作，最好使用 jQuery。将元素与文档顶部对齐只是删除负边距并将“顶部”定义为 0 的情况；