html - 将第二个 div 容器旁边的 div 容器居中？

Question

我有一个名为标题的 div 容器。在这个 div 中有两个元素，一个无序列表类型的菜单栏和一个 div 容器。我将使菜单栏水平居中，另一个 div 容器应停靠在右侧显示侧，边距为 5%。我该如何做到这一点，有人有想法吗？

好的，这是我来自jsfiddle的小例子:http://jsfiddle.net/nchm3gyj/

HTML

<div class="headline">
        <ul class="navbar">
            <li><a href="#">Home</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>

        <img class="facebook" src="" />
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}

.headline {
  height: 60px;
  width: 100%;
  background-color: black;
  margin-top: 10px;
}

.headline .navbar{
  margin: 0px;
  padding: 0px;

  padding-left: 10px;
  padding-right: 10px;

  float: left;
  height: 60px;
  width: auto;
  background-color: yellow;
  list-style: none;
}

.headline .navbar li{
  display: inline;
} 

.headline .navbar li a {
  text-decoration: none;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
}

.headline .facebook {
  width: 60px;
  height: 60px;
  margin-right: 5%;
  float: right;
}


#clear {
  clear: both;
}

Answer 1

如果您希望导航栏位于父 block 的中心，这是一种方法。

将 display: inline-block 应用于 .navbar 并将 text-align: center 应用于 .headline 。

假设您希望导航栏相对于整个屏幕居中 父 block 的宽度，您需要将图像从内容流中取出。 您可以通过将 position:absolute 应用于 .facebook 元素来实现此目的。

.headline {
  height: 60px;
  width: 100%;
  background-color: black;
  margin-top: 10px;
  text-align: center;
  position: relative;
}

.headline .navbar{
  margin: 0px;
  padding: 0px;

  padding-left: 10px;
  padding-right: 10px;

  height: 60px;
  width: auto;
  display: inline-block;
  background-color: yellow;
  list-style: none;
}

.headline .navbar li{
  display: inline;
} 

.headline .navbar li a {
  text-decoration: none;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
}

.headline .facebook {
  position: absolute;
  top: 0;
  right: 5%;
  width: 60px;
  height: 60px;
}

<div class="headline">
        <ul class="navbar">
            <li><a href="#">Home</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>

        <img class="facebook" src="http://placehold.it/60x60" />
</div>