2

请看看这个：http: //sources.freehosting.bg/landing.html

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

我想出的唯一解决方案是用 JS 计算 #content 的高度并设置填充，但我意识到这是最蹩脚的解决方案。

请告诉我如何实现这一目标。

4

4 回答 4

2

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

它通过强制包含div表现为 atable-cell并利用vertical-align: middle样式来工作。它根本不需要您知道任何元素的高度。

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

HTML：

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

重要的样式是：

display: table-cell 
vertical-align: middle

其余的只是为了演示。CSS：

div.a {
    border: 1px solid red;
}
div.b {
    border: 1px solid blue;
    height: 200px;
    display:table-cell;
    vertical-align:middle;
}
于 2012-08-01T13:23:00.403 回答
0

我知道的唯一方法是使用纯 CSS、没有 JS 和没有 hacks 要求你知道你试图定位的东西的高度：

<html>
  <head>
    <style type="text/css">
      /* Give your document height */
      body, #content {
        height: 100%;
      }

      /* Give your element height */
      .thing {
        width: 20px;
        height: 300px;
        background: #000;
      }
      /* Position thing */
      #content .thing {
        position: absolute;
        top: 50%;
        margin-top: -150px; /* half the height of the thing */
      }
    </style>
  </head>
  <body>
    <div id="content">
       <div class="thing"></div>
    </div>
  </body>
</html>

编辑：更新了项目的高度，容器 ID。仍然工作得很好。

于 2012-08-01T13:46:18.523 回答
0

如果您的内容高度是固定的，请在内容之前放置一个 div

<div id="distance"></div>
<div id="content">
  Vertically centered :D
</div>

并将其设置为：

html, body {
height:100%;
margin:0;
padding:0;
}

div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}

div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}

​</p>

于 2012-08-01T12:52:42.877 回答
0

有一种方法可以在不使用 javascript 且不知道内容高度的情况下执行此操作 - 但纯粹主义者不会喜欢它。话又说回来，有时候不被潮流人士认可也没关系。有时你所需要的只是完成工作，因为你的老板想要那样做。

解决方案是：使用一张桌子（告诉你纯粹主义者不喜欢它）。使用老式的方式布局并滥用 HTML 为表格指定了许多功能这一事实。

表格单元格是唯一具有垂直对齐属性的 HTML 元素，该属性可以满足大多数人的期望。只需为表格提供 100% 的宽度和高度（以便随窗口大小扩展）并使用单元格对齐来定位您想要的内容。

我只用过一次这个技巧，它仍然让我觉得很脏*但是当你真的需要它时，它比其他任何东西都好用。

*注意：我自己是一个纯粹主义者，但明白有时男人必须做男人必须做的事情。

于 2012-08-02T08:11:37.753 回答