屏幕尺寸变化时内容是否可以保持居中?

时间:2010-01-31 09:01:35

标签: javascript css

首先,这是我粗略的例子:http://demindu.com/sandbox/simple.html

我正在尝试做什么:

创建一个内容div:让我们说400px高和700px宽,就像这个例子。内容框每个方向的边距为50px。无论屏幕分辨率如何,内容div应始终在垂直和水平方向上居中。黑色背景应从中心内容区域一直延伸到屏幕右侧,但不能从左侧延伸。

我能想到的唯一方法是使用window.innerWidth& JavaScript中的window.innerHeight,但我不知道这是否可能。

中间部分上方和下方的空白区域数量需要为:  window.innerHeight - div的高度(在此示例中:500px [400px包含两个50px边距])/ 2

黑条左侧的空白区域需要为:  window.innerWidth - div的宽度(在此示例中:800px [带有两个50px边距的700px框])/ 2

我的问题是:这在JavaScript中是否可行?纯粹的CSS可以用某种方式吗?

3 个答案:

答案 0 :(得分:1)

你可以在4点绝对定位的CSS中完全做到这一点。您将需要两个元素:

  1. 第一个项目从屏幕右侧跨越到内容所在的中心。此元素对元素的顶部,左侧和右侧坐标使用绝对定位(我们可以保留底部未指定,因为它由高度处理。)

  2. 第二项嵌套在前者中。此项具有固定宽度,以确保内容本身保持您选择的指定宽度。我们还可以在此对象上设置高度和填充,父级将继承它的高度。不要使用边距来模拟填充 - 如果我们在这里尝试做一些定位技巧,它可能会导致跨浏览器问题。

  3. 所以你的HTML代码看起来像这样:

        <div id="my_centered_design">
            <div id="my_centered_design_content">
                <p>This is just some example text.</p>
            </div>
        </div>
    

    你的CSS看起来像这样:

        div#my_centered_design {
          background: #000;
          margin-left: -400px;
          margin-top: -250px;
          left: 50%;
          position: absolute;
          right: 0;
          top: 50%;
       }
    
       div#my_centered_design_content {
          background: #333;
          height: 400px;
          /* I think you actually want padding for 
             the effect you're trying to accomplish */
          padding: 50px;
          width: 700px;
       }
    

    基本上这与Joe2Tutorial的技巧相同,只是我们应用其他定位规则将中心元素粘贴到屏幕的右侧。

答案 1 :(得分:0)

我认为这种纯粹的CSS解决方案最适合您:http://www.joe2torials.com/view_tutorial.php?view=37

答案 2 :(得分:0)

一个非常快速的谷歌导致了这段代码。

此代码未在中间对齐div。你实际上为自己的网站提供了以下div css

.main { 宽度:140px;背景颜色:#252525; float:left; margin-top:25px; }

在对齐的表格中居中。所以,基本上你正在使用桌子的居中功能将你的左浮动div作为一个内容居中。你没有通过div或css做任何事情。你提供的那段css代码并不是关于将div放在中间的任何东西。