CSS 导航栏 - 基于导航栏内的元素居中

Question

我正在尝试创建一个包含四个元素的导航栏，两个较小的按钮将链接到主页和联系页面，然后是两个较大的按钮将链接到网站的两个主要部分。我正在尝试以两个大按钮居中、两个小按钮位于它们左侧的方式定位内容。

我不能“margin: 0 auto;”它们自己的 div 中的两个大按钮，因为我必须将其设置为“display: block;”将它们设置在与较小按钮不同的行上，一旦浏览器窗口发生变化，绝对定位就会弄乱布局。

我觉得我在这里缺少一些简单的东西。我是不是从错误的 Angular 来看这个？

这是我目前所拥有的 Dabblet... http://dabblet.com/gist/6287837

HTML

<div id="nav-container">
<div id="small-button-container">
    <img src="http://placehold.it/47x22" class="small-button01" />
    <img src="http://placehold.it/70x42" class="small-button02" />
</div>
<div id="big-button-container">
    <img src="http://placehold.it/360x64" />
    <img src="http://placehold.it/360x64" />
</div>
</div>

CSS

#nav-container{
outline: 1px red dashed;
width: 1000px;
display: block;
margin: 0 auto;}

#small-button-container{
display: inline-block;
width: 136px;
position: relative;
top: -22px;
left: 40px;}

#big-button-container{
display: inline-block;
width: 780px;
height: 64px;
margin-left: 70px;}

.small-button01{
display: inline;
position: relative;
left: 5px;}

.small-button02{
display: inline;
position: relative;
left: 15px;}

Answer 1

您可以将 position: absolute; 应用于您的 #small-button-container，这样大按钮就会居中。

请注意，我们将 position: relative; 放在父容器上，因此 #small-button-container 将绝对相对于其父容器定位。

CSS

#nav-container {
    outline: 1px red dashed;
    width: 1000px;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
#small-button-container {
    position: absolute;
    top: 0;
    left: 0;
}

Demo