HTML和CSS - 无论浏览器大小如何都以div为中心

时间:2012-02-17 17:44:32

标签: css html centering

为什么感觉应该是对我来说最简单的任务总是最令人困惑的...它在标题中...但我已经玩过yonks但是不能让它为我工作!

基本上(只是为了让它更加清晰,我希望得到以下内容)(图像是div背景)。

enter image description here

所以无论浏览器窗口的大小如何,div总是集中的!

感谢您提供任何建议...... [=

编辑:基本上我想要实现的是为注册表单设置弹出窗口的作弊方式。

所以目前整个页面包含以下内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>BlurbeRella - Registeration</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <div id="registerpage">
  <img src="images/registerpage.png" class="registerpage" />
 </div>
</html>

CSS:

img.registerpage{ 
 text-align: center;
 top: 100%;
}

#registerpage{
 text-align: center;
 width: 100%;
}

css是我努力保持它的核心.....

基本上:此刻的网站(还没有功能)是blurberella.x10.mx

当用户点击注册时我会得到网站本身的背景图片,所以看起来你仍然在同一页面上......然后在中间我会有我的表格...但要确保站点图像看起来仍然像一个网站我需要它保持中心无论浏览器大小!

我希望这是有道理的...我不是因为我在这里作弊,但凭借我目前的知识,这是我能做到的最好的......我还在学习!

5 个答案:

答案 0 :(得分:2)

也许我在某个地方误解了这个问题,但根据我的理解,你正在寻找this之类的东西。

HTML:

<body>
<div id="imgholder"></div>
</body>

CSS:

html, body {
    height: 100%;
}

#imgholder {
    height: 100%;
    background: url(image.png) center center no-repeat;
}​

答案 1 :(得分:1)

修改根据您的额外信息,http://jsfiddle.net/EJM9J/就是您想要的。只是一个像其他任何一个div,只在页面中心。如果需要,可以给它一个背景图片。

你需要Javascript。

答案 2 :(得分:1)

我刚刚为另一个CSS主题做了this。看看它是不是你要找的东西。

答案 3 :(得分:1)

不确定这是否适用于所有浏览器,但它应适用于较新的浏览器。

CSS:

.container {
position: fixed;
height: 100%;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical
}

.content {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1
}

HTML:

<div class="container">
<div class="content">
Stuff to be Centered
</div>
</div>

答案 4 :(得分:0)

虽然有一些破解响应有效“谢谢大家”

我用这个

排序了

背景附件:固定; 背景位置:中心;

谢谢大家....

我很抱歉一个解释不清的问题