垂直对齐 [英] Vertical Alignment

问题描述

请参阅： http://sources.freehosting.bg/landing.html

我试图垂直对齐#content，使其在较大（1920x1200）和较小（1024x768）分辨率下看起来不错。我的意思是它没有一个滚动条。
如你所见，有足够的可用空间，所以不需要滚动条。

I am trying to vertically align #content so it looks good on larger (1920x1200) and smaller (1024x768) resolutions. By that I mean it does not have a scrollbar. As you see there is plenty of free space so a scrollbar is unneeded.

我想出的唯一解决方案是计算#content的高度JS和设置一个填充，但我意识到这是最可能的解决方案。

The only solution I came up with is to calculate the height of #content with JS and to set a padding, but I realize it is the lamest possible solution.

请告诉我如何实现。

推荐答案

查看 这个小提琴 是您要找的。简单解决方案IMO。

See if this fiddle is what you are looking for. Simple solution IMO.

它通过强制包含 div 来表现为 table-cell ，并使用 vertical-align：middle 样式。它不需要你知道任何元素的高度。

It works by forcing the containing div to behave as a table-cell, and making use of the vertical-align: middle style. It doesn't require you to know the heights of any elements at all.

小提琴中使用的代码如下。

Code used in the fiddle are below.

HTML：

<div class="a">
    text inside div a
    <div class="b">
        text inside div b
    </div>
</div>

重要的风格是：

display: table-cell 
vertical-align: middle

其余的只有示范。 CSS：

The rest are only there for demonstration. CSS:

div.a {
    border: 1px solid red;
}
div.b {
    border: 1px solid blue;
    height: 200px;
    display:table-cell;
    vertical-align:middle;
}

这篇关于垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！