水平居中两个 div答案

【问题标题】：horizontally center two divs水平居中两个 div
【发布时间】：2014-05-22 00:45:01
【问题描述】：

我有两个需要彼此水平居中，包裹在一个 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;
}

【问题讨论】：

您的 HTML 中没有标题元素，您的意思是要包含一个吗？

标签： html css alignment center

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

从#logo 和导航中删除浮动。然后将你的#center div 设置为 text-align:center;

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

这就是你的想法吗？

【讨论】：

不幸的是，我将 div 堆叠在一起，然后居中。我希望将徽标左侧，导航右侧和两个水平居中。感谢您的帮助。
jsfiddle.net/LFQt2 这是你看到的吗？我不确定我是否完全理解您想要实现的目标。
这就是我所拥有的。 danielmdesigns.com/blackcattattoo/index.html -- 一切都对齐顶部或底部。我想将徽标和导航都对齐到中间
好吧，也许你写错了，你确定你不是要“垂直”居中而不是水平对齐吗？如果你在这里，你可以做：在你的 ul 上设置 72px 的行高。
哇。非常抱歉！是的。这正是我想要的。很抱歉浪费了您宝贵的时间。非常感谢！！！

【解决方案3】：

您的完整 CSS 应该是：

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

【讨论】：