垂直对齐
请看看这个:http://sources.freehosting.bg/landing.html垂直对齐
我尝试垂直对齐#内容,所以它看起来在大(1920×1200)和小(1024×768)分辨率良好。我的意思是它没有滚动条。 正如你所看到的,有很多可用空间,所以不需要滚动条。
我想出的唯一解决方案是用JS计算#content的高度并设置填充,但我意识到这是最可能的解决方案。
请告诉我如何做到这一点。
如果你的内容高度是固定放在一个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;
}
看看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;
}
我知道的,使用纯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的高度。仍然工作得很好。
我试图定位的东西的高度是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%的宽度和高度(以便随着窗口大小展开)并使用单元格对齐来定位所需的内容。
我只使用过这个技巧一次,它仍然让我觉得脏*但是当你真的需要它时它比其他任何东西都更好。
* 注意:我自己是纯粹主义者,但明白有时一个男人必须做一个男人必须做的事情。
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