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

Question

我有一个名为 headline 的 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

我有点不确定你想做什么，是吗？将 text-align: center 应用于 .headline，将 display: inline-block 应用于 .navbar，然后将 position: absolute 应用于 .facebook?

http://jsfiddle.net/nchm3gyj/42/

Answer 2

如果您希望导航栏在父块中居中，这是一种方法。

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

假设您希望导航栏相对于整个页面居中父块的宽度，您需要将图像从内容流中取出。您可以通过将 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>

Answer 3

我认为您可能需要 position: absolute Facebook 图片和 display: inline-block 您的菜单栏（以 .headline 为中心）：

http://jsfiddle.net/nchm3gyj/32/

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

Centering a div container which is next to a second div container?

html

css

center