我正在尝试水平对齐两个 div。我在第二个 div 中的列表是水平对齐的，但是这两个 div 无法作为内联 block 水平对齐。任何帮助将不胜感激。 下面是 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>
fiddle :http://jsfiddle.net/8TfzJ/
最佳答案
摆脱:
#user-nav-container ul li {
display:inline;
}
这就是导致导航元素水平而不是垂直的原因。
更新
要垂直对齐两个元素，请在其上添加 vertial-align top，请参阅:http://jsfiddle.net/8TfzJ/2/ .
请注意，我在 fiddle 中添加了边框，以便您可以看到元素是垂直对齐的。您可能需要调整所包含元素的边距和填充，以完全实现您想要的效果。使用 Firebug for Firefox 可以为您提供帮助。您可以在浏览器中使用 CSS 检查实验。
在现代浏览器中您应该看到:
请参阅这篇文章，了解有关 inline-block 的缺点以及如何克服这些缺点的信息:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
顺便说一句，你不应该放置 block 元素，例如内联元素内的 h1 一个。应该是相反的。尝试在这里验证它:http://validator.w3.org/#validate_by_input+with_options
关于inline - 使用CSS显示水平对齐div :，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21469495/