请教我的代码中为什么有个div无法居中

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 4281 天前的主题，其中的信息可能已经有所发展或是发生改变。

html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxx</title>
<script src="http://lib.sinaapp.com/js/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="logo" id="front">
</div>
<div class="startgame">
<a href="#"></a>
</div>
</div>
</body>
</html>

CSS样式定义如下：
*{
padding: 0;
margin: 0;
}
body{
width: 800px;
background: url(bg2.jpg) repeat;
}
img{
border: 0;
}
.main{
margin: auto;
width:730px;
}
}
.logo{
width:428;
height: 285px;
background: url(logo.png) no-repeat;
}
#front{
height: 285px;
background: url(logo.png) no-repeat;
}

}
.startgame{
margin-top: 100px;
padding-bottom: 100px;
}
.startgame a:hover {
background: url(bta.png) no-repeat 0px -313px;
}
.startgame a {
width: 163px;
height: 45px;
display: block;
background: url(bta.png) no-repeat 0px -223px;
margin:auto;
}

其中startgame这个div是可以居中对齐的，但是上面那个logo div完全对不齐，一直在最左，请教大家

div

url

startgame

31 条回复 • 1970-01-01 08:00:00 +08:00

gucheen

2012-07-31 11:30:03 +08:00

你logo和front都没有给剧中啊。。。

stackpop

2012-07-31 11:36:56 +08:00

@gucheen 加了margin auto，根本没有用啊~
margin-left:500px;都没有任何效果。

gucheen

2012-07-31 11:45:09 +08:00

@stackpop 你的CSS貌似多了几个}，检查下

gucheen

2012-07-31 11:45:42 +08:00

然后加上margin:auto;我这边是可以居中的

NemoAlex

2012-07-31 11:48:28 +08:00

CSS 里有几个多余的 “}”

zsdsz

2012-07-31 11:50:20 +08:00

你body设置了宽度，logo是相对于body居中的，你删掉body的宽度就知道。

stackpop

2012-07-31 11:58:32 +08:00

@gucheen 我删除了那2个多余的} 加了margin:auto依然没有效果。。。。

*{
padding: 0;
margin: 0;
}
body{
width: 800px;
background: url(bg2.jpg);
}
img{
border: 0;
}
.main{
margin: auto;
width:730px;
}
.logo{
width:428;
height: 285px;
background: url(logo.png) no-repeat;
margin: auto;
}
#front{
margin: auto;
height: 285px;
background: url(logo.png) no-repeat;
}

.startgame{
margin-top: 100px;
padding-bottom: 100px;
}
.startgame a:hover {
background: url(bta.png) no-repeat 0px -313px;
}
.startgame a {
width: 163px;
height: 45px;
display: block;
background: url(bta.png) no-repeat 0px -223px;
margin:auto;
}

stackpop

2012-07-31 11:59:46 +08:00

@zsdsz 如何让他相对于main居中呢？

gucheen

2012-07-31 12:03:58 +08:00

我这边一切正常，话说你把logo的width的px加上，我用border代替图片，显示是居中的

zsdsz

2012-07-31 12:16:15 +08:00

@stackpop 如果你的body一定要设宽度，那就把margin: auto;放到body。

luin

2012-07-31 12:16:18 +08:00

.logo 的 width 你没加 px

lingyired

2012-07-31 12:27:34 +08:00

width:428;

zsdsz

2012-07-31 12:29:01 +08:00

@lingyired
@luin 在chrome中是可以正常显示的

frittle

2012-07-31 12:49:45 +08:00

除了上面指出的错误之外，在IE里是无法用margin: auto来居中的。

NemoAlex

2012-07-31 12:52:39 +08:00

@frittle 不可能

cloudhunter

2012-07-31 17:08:34 +08:00

在IE上想用margin: 0 auto;来居中，必须指定正确的html头部声明如下：

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

wuxiaolin

2012-08-02 14:13:33 +08:00

好长的代码

LcaKen0day

2012-08-02 16:38:15 +08:00

你可以试试在这个div中加入一个<table border="0px" align="center" valign="center"></table>

LcaKen0day

2012-08-02 16:40:50 +08:00

一般的话用div+css控制图片只可以水平剧终，控制不了垂直剧终，你可以试试在其中插入一个<table></table>利用table的属性去定义logo让其居中。

LcaKen0day

2012-08-02 16:43:02 +08:00

还有就是注意一下类选择器跟id选择器是否有冲突，id选择器的优先级要高于类选择器。

Air_Mu

2012-08-02 16:53:10 +08:00

这不是PHP问题
#front会覆盖.logo 你这样写没意义

给div.main设置宽度不要给body设置。

VeryCB

2012-08-02 18:02:59 +08:00

@LcaKen0day 额…现在都不提倡用div来布局了，table就更算了吧…

LcaKen0day

2012-08-02 18:07:02 +08:00

@VeryCB 嗯是很少了，不过这只是布局的一个方法而已。而且楼主貌似帖子发错地方了

wegottago2

2012-08-02 22:56:56 +08:00

@stackpop body{text-align: center;}

wegottago2

2012-08-02 22:58:14 +08:00

@stackpop wrapper{margin: auto;width: xxxpx;}

wegottago2

2012-08-02 22:58:29 +08:00

@stackpop #wrapper{margin: auto;width: xxxpx;}

luguozmy

2012-08-03 09:17:14 +08:00

@VeryCB
@LcaKen0day
请问现在提倡使用什么进行布局呢?

2012-08-03 10:54:49 +08:00

这个问题很简单,对于一个正常的浏览器来说,看到你给body设置了宽度,一定会让整个网页(body)以这个宽度居左对齐去了.你在后面对DIV做什么居中操作也只会让这个div相对body居中,而无法相对浏览器窗口居中.

m4ji

2012-08-03 14:09:07 +08:00

我也搭车问个问题.
http://10years.sinaapp.com/

css3 里可以把盒模型改成ie6形式的.所以,我试图以后都用ie6的盒子了. 但是用这两个 div 测试的时候.却发现了.问题.
一个加了padding, 一个没加padding.按理说, 我切换了盒模型之后.新款浏览器显示的是等宽,这个我不难理解,本该如此.

但是,为什么我用ie6测试一下.却发现,ie6 里面竟然是正常的盒子的.
上下两个是不等宽的.

如果不用 <!DOCTYPE html> 这个头的话, ie6 又会变成原本的ie6盒子了. 是我的ie6被人打了补丁了吗??

求大神验证下,你们的两个框框是一样宽的么? 怎么理解这灵异

m4ji

2012-08-03 14:14:59 +08:00

@m4ji 不能删除啊.
我查到了...ie6的盒子只有在没头时候才出现...泪.被伤害了.看的css书了几乎都没注意到过这条

LcaKen0day

2012-08-03 16:14:58 +08:00

@luguozmy web2.0主要是div+css
php+mysql