横向和纵向横向滚动场地布局中心Div

时间:2013-10-15 14:30:10

标签: html layout center css

我对网络开发很陌生。我基于这个非常简单的教程http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/为问卷设计了一个简单的横向滚动布局。

请参阅jsfiddle上的示例:http://jsfiddle.net/emon/Rqhcf/6/

主HTML:

<div id="question01" class="panel">Question 1</div> 
<div id="question02" class="panel">Question 2</div> 
<div id="question03" class="panel">Question 3</div>

主要CSS:

body {width: 6000px; margin: 0;}

.panel {width: 930px; float: left;  padding-left: 30px; padding-right: 1040px;
    padding-top: 45px; background: #eee;}

现在,每个问题都从问题div的左上角开始。但是,我希望将div中的每个问题水平居中(有利地也垂直居中)。此外,问题div的宽度应取决于浏览器视口,以便根据不同的窗口大小灵活地居中。

这是一个非常令人沮丧的问题,因为我不知道如何访问视口的宽度。 有人有解决方案吗?这是纯粹的html / css和跨浏览器吗?

希望找到解决方案 诺贝特

1 个答案:

答案 0 :(得分:0)

嗨,我希望这可以解决你的问题http://jsfiddle.net/Rqhcf/30/

使其工作是主要的工作

width: %