Question

我试图水平对齐两个div。我在第二个div中的列表是水平对齐的，但是两个div无法水平对齐为内联块。任何帮助将不胜感激。这是CSS和HTML代码：

CSS

#wrapper {
margin:0 auto;
width:100%;
position:relative;
}
.navit {
position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
display:inline;
}
.container-logo {
display:inline-block;
}
.container-user {
display:inline-block;
}
#user-nav-container ul li {
display:inline;
}
#user-nav-container ul li a {
background-color:#000000;
color:#FFF;
font-size:14px;
}
#user-nav-container ul {
list-style-type:none;
background-color:#000000;
}

HTML

<html>
<body>
    <div id="wrapper">
        <header id="top">
            <div id="navbar" class="navit">
                <div id="logo-container" class="container-logo"><a href="http://www.site.com/" id="logo">
    <h1>ServiceMyResume.com</h1>
                </a></div>

                <div id="user-nav-container" class="container-user">
                    <ul>
                    <li><a href="http//www.site.com">Site 1</a></li>
                    <li><a href="https://www.site.com">Site 2</a></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>
</body>
</html>

小提琴：http://jsfiddle.net/8TfzJ/

Answer 1

摆脱：

#user-nav-container ul li {
    display:inline;
}

这是导致您的导航元素水平而不是垂直的原因。

http://jsfiddle.net/8TfzJ/1/

<强>更新

要对两个元素进行垂直对齐，请在其顶部添加vertial-align，请参阅：http://jsfiddle.net/8TfzJ/2/。

请注意，在小提琴中我添加了一个边框，以便您可以看到元素是垂直对齐的。您可能需要调整所包含元素的边距和填充以完全实现您所需的内容。使用Firebug for Firefox在这里为您提供帮助。您可以在borwser中查看CSS实验。

在现代浏览器中，您应该看到： enter image description here

有关inline-block的缺点以及如何克服这些问题，请参阅此文章：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

在旁注中，您不应该放置块元素，例如内联元素中的h1例如a。它应该是相反的方式。请尝试在此处验证：http://validator.w3.org/#validate_by_input+with_options

Answer 2

我知道它不是内联块，但你的意思是这样的JSFiddle？

#navbar:after
{
    display: table;
    content: "";
    clear: both;
}
#logo-container,
#user-nav-container
{
    float: left;
}

使用CSS显示水平对齐div：

2 个答案: