垂直对齐

请看看这个：http://sources.freehosting.bg/landing.html 垂直对齐

我尝试垂直对齐＃内容，所以它看起来在大（1920×1200）和小（1024×768）分辨率良好。我的意思是它没有滚动条。正如你所看到的，有很多可用空间，所以不需要滚动条。

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

请告诉我如何做到这一点。

2012-08-01 barakuda28

如果你的内容高度是固定放在一个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; 
}

来源

2012-08-01 12:52:42 Gijs

http://jsfiddle.net/9Q36u/ – Gijs 2012-08-01 12:54:54

为了这个工作，我仍然需要用JS计算深灰色空间的高度，并将#content设置为该高度。然后，我必须将#content内部元素包装在某个div中，并将您的技术应用于该div。它再次使用JS :) – barakuda28 2012-08-01 13:08:53

不是。你可以只有灰色的背景，并把所有这些都包含在100％高度的div中。在说div之后，你放下页脚，并给它一个负的顶部边缘，以将它移回到视图中。所有你必须知道的是你的页脚有多高，你的主要内容有多高（例如，手写的东西+水平线之间的东西）。 – 2012-08-01 13:27:14

看看this fiddle是你在找什么对于。 IMO简单解决方案。

它通过迫使包含div表现为table-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-01 13:23:00 Arj

我知道的，使用纯CSS作品的唯一办法，没有JS也没有黑客需要你知道你想要的位置的事情高度：

<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-01 13:46:18

我试图定位的东西的高度是300px，但是为了工作，我需要扩展容器（不是“body”，而是#content）的高度。在我看来，JS必须要完成。 – barakuda28 2012-08-01 13:52:53

您的意见并不重要。我的意见不重要。重要的是“代码工作吗？”复制代码，将其输入到任何编辑器中，并查看它是否可以用你自己的眼睛。 – 2012-08-01 13:59:29

我知道它的作品，但那不是我的情况。在我的情况下，＃内容不会扩展到整个灰色区域，这是问题所在。 – barakuda28 2012-08-01 14:14:28

有没有一种方法可以做到这一点没有JavaScript和不知道内容的高度 - 但纯粹主义者不会喜欢它。再次，有时它不是由时尚人士批准并不重要。有时你需要的只是完成工作，因为你的老板是这样想的。

而解决方法是：使用表（告诉你纯粹主义者不会喜欢它）。做布局老派的方式，并滥用HTML指定很多表格功能的事实。

表格单元格是唯一具有垂直对齐属性的HTML元素，它可以完成大多数人期望的操作。只需给出表格100％的宽度和高度（以便随着窗口大小展开）并使用单元格对齐来定位所需的内容。

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

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

来源

2012-08-02 08:11:37 slebetman

回答

相关问题