Question

我有两个我需要彼此水平居中，包裹在一个div中。你能解释一下我做错了吗？

我的HTML

    <div id="center">
    <div id="logo"><img src="images/blackcat_logo.png" width="200px"></div>
    <nav>
        <ul>
            <li>SHOP</li>
            <li>ARTIST</li>
            <li>SERVICES</li>
            <li>FAQs</li>
            <li>CONTACT</li>
        </ul>    
    </nav>
    </div>

我的CSS：

header{
   height:500px;
   width:auto;
   background-image:url(images/headerphoto.png);
   text-align:center;
}

#center{
   width:960px;
   margin:auto;
   overflow:hidden;
   display:inline-block;
}

#logo{
   float:left;
   display:inline-block;
}

nav{
   float:right;
   display:inline-block;
}

Answer 1

#center {
  text-align:center;
}
#logo, nav {
  display: inline-block;
}

The above code works for me http://www.cssdesk.com/QKNNj .

Answer 2

从#logo和nav中删除浮动。然后将#center div设置为text-align：center;

#center {
    width:960px;
    margin:auto;
    overflow:hidden;
    display:inline-block;
    text-align:center;
}

这是你的想法吗？

Answer 3

您的完整 CSS应为：

#center {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    left:0;
    right:0;
    text-align:center;
}

横向居中两个div

3 个答案: