V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
stackpop
V2EX  ›  PHP

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

  •  
  •   stackpop · 2012-07-31 11:21:31 +08:00 · 4680 次点击
    这是一个创建于 4499 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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完全对不齐,一直在最左,请教大家
    31 条回复    1970-01-01 08:00:00 +08:00
    gucheen
        1
    gucheen  
       2012-07-31 11:30:03 +08:00
    你logo和front都没有给剧中啊。。。
    stackpop
        2
    stackpop  
    OP
       2012-07-31 11:36:56 +08:00
    @gucheen 加了margin auto,根本没有用啊~
    margin-left:500px;都没有任何效果。
    gucheen
        3
    gucheen  
       2012-07-31 11:45:09 +08:00
    @stackpop 你的CSS貌似多了几个},检查下
    gucheen
        4
    gucheen  
       2012-07-31 11:45:42 +08:00
    然后加上margin:auto;我这边是可以居中的
    NemoAlex
        5
    NemoAlex  
       2012-07-31 11:48:28 +08:00
    CSS 里有几个多余的 “}”
    zsdsz
        6
    zsdsz  
       2012-07-31 11:50:20 +08:00
    你body设置了宽度,logo是相对于body居中的,你删掉body的宽度就知道。
    stackpop
        7
    stackpop  
    OP
       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
        8
    stackpop  
    OP
       2012-07-31 11:59:46 +08:00
    @zsdsz 如何让他相对于main居中呢?
    gucheen
        9
    gucheen  
       2012-07-31 12:03:58 +08:00
    我这边一切正常,话说你把logo的width的px加上,我用border代替图片,显示是居中的
    zsdsz
        10
    zsdsz  
       2012-07-31 12:16:15 +08:00
    @stackpop 如果你的body一定要设宽度,那就把margin: auto;放到body。
    luin
        11
    luin  
       2012-07-31 12:16:18 +08:00
    .logo 的 width 你没加 px
    lingyired
        12
    lingyired  
       2012-07-31 12:27:34 +08:00
    width:428;
    zsdsz
        13
    zsdsz  
       2012-07-31 12:29:01 +08:00
    @lingyired
    @luin 在chrome中是可以正常显示的
    frittle
        14
    frittle  
       2012-07-31 12:49:45 +08:00
    除了上面指出的错误之外,在IE里是无法用margin: auto来居中的。
    NemoAlex
        15
    NemoAlex  
       2012-07-31 12:52:39 +08:00
    @frittle 不可能
    cloudhunter
        16
    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
        17
    wuxiaolin  
       2012-08-02 14:13:33 +08:00
    好长的代码
    LcaKen0day
        18
    LcaKen0day  
       2012-08-02 16:38:15 +08:00   ❤️ 1
    你可以试试在这个div中加入一个<table border="0px" align="center" valign="center"></table>
    LcaKen0day
        19
    LcaKen0day  
       2012-08-02 16:40:50 +08:00
    一般的话用div+css控制图片只可以水平剧终,控制不了垂直剧终 ,你可以试试在其中插入一个<table></table>利用table的属性去定义logo让其居中。
    LcaKen0day
        20
    LcaKen0day  
       2012-08-02 16:43:02 +08:00
    还有就是注意一下类选择器跟id选择器是否有冲突,id选择器的优先级要高于类选择器。
    Air_Mu
        21
    Air_Mu  
       2012-08-02 16:53:10 +08:00
    这不是PHP问题
    #front会覆盖.logo 你这样写没意义

    给div.main设置宽度 不要给body设置。
    VeryCB
        22
    VeryCB  
       2012-08-02 18:02:59 +08:00   ❤️ 1
    @LcaKen0day 额…现在都不提倡用div来布局了,table就更算了吧…
    LcaKen0day
        23
    LcaKen0day  
       2012-08-02 18:07:02 +08:00
    @VeryCB 嗯 是很少了,不过这只是布局的一个方法而已。而且楼主貌似帖子发错地方了
    wegottago2
        24
    wegottago2  
       2012-08-02 22:56:56 +08:00
    @stackpop body{text-align: center;}
    wegottago2
        25
    wegottago2  
       2012-08-02 22:58:14 +08:00
    @stackpop wrapper{margin: auto;width: xxxpx;}
    wegottago2
        26
    wegottago2  
       2012-08-02 22:58:29 +08:00
    @stackpop #wrapper{margin: auto;width: xxxpx;}
    luguozmy
        27
    luguozmy  
       2012-08-03 09:17:14 +08:00
    @VeryCB
    @LcaKen0day
    请问现在提倡使用什么进行布局呢?
    j
        28
    j  
       2012-08-03 10:54:49 +08:00
    这个问题很简单,对于一个正常的浏览器来说,看到你给body设置了宽度,一定会让整个网页(body)以这个宽度居左对齐去了.你在后面对DIV做什么居中操作也只会让这个div相对body居中,而无法相对浏览器窗口居中.
    m4ji
        29
    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
        30
    m4ji  
       2012-08-03 14:14:59 +08:00   ❤️ 1
    @m4ji 不能删除啊.
    我查到了...ie6的盒子只有在没头时候才出现...泪.被伤害了.看的css书了 几乎都没注意到过这条
    LcaKen0day
        31
    LcaKen0day  
       2012-08-03 16:14:58 +08:00
    @luguozmy web2.0主要是div+css
    php+mysql
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2882 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 08:58 · PVG 16:58 · LAX 00:58 · JFK 03:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.