首先,这是我粗略的例子:http://demindu.com/sandbox/simple.html
我正在做的事情:
创建一个内容div:让我们说400px高和700px宽,就像这个例子 . 内容框每个方向的边距为50px . 无论屏幕分辨率如何,内容div应始终在垂直和水平方向上居中 . 黑色背景应从中心内容区域一直延伸到屏幕右侧,但不能从左侧延伸 .
我能想到的唯一方法就是在JavaScript中使用 window.innerWidth
和 window.innerHeight
,但我不知道这是否可能 .
中间部分上方和下方的空白空间量需要为: window.innerHeight
- div的高度(在此示例中:500px [400px框,两个50px边距])/ 2
黑条左侧的空白区域需要为: window.innerWidth
- div的宽度(在此示例中:800px [700px框,两个50px边距])/ 2
我的问题是: Is this possible in JavaScript? Is this possible somehow with pure CSS?
3 回答
你可以完全用CSS进行4点绝对定位 . 您将需要两个元素:
第一个项目从屏幕右侧跨越到内容所在的中心 . 此元素对元素的顶部,左侧和右侧坐标使用绝对定位(我们可以保留底部未指定,因为它由高度处理 . )
第二项嵌套在前者中 . 此项具有固定宽度,以确保内容本身保持您选择的指定宽度 . 我们还可以在此对象上设置高度和填充,父级将继承它的高度 . 不要使用边距来模拟填充 - 当你只是尝试做我们在这里的定位技巧时,它可能会导致跨浏览器问题 .
所以你的HTML代码看起来像这样:
而你的CSS看起来像这样:
基本上这是与Joe2Tutorial相同的技巧,除了我们应用额外的定位规则将中心元素粘附到屏幕的右侧 .
我认为这个纯粹的CSS解决方案最适合你:http://www.joe2torials.com/view_tutorial.php?view=37
一个非常快速的谷歌导致了这段代码 .
此代码不会在中间对齐div . 你为自己的网站实际上是你放下以下div css
.main {width:140px; background-color:#252525; float:left; margin-top:25px; }
在一个对齐的表中居中 . 所以,基本上你正在使用 table 的居中功能将你的左浮动div作为一个内容居中 . 你没有通过div或css做任何事情 . 你提供的那段css代码并不是关于将div放在中间的任何东西 .