Question

我在顶部有一个DIV和一些锚点。首先是徽标，其余是文字。我设定的样式如下。

div.nav-top {
  height: 120px;
  vertical-align: middle;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  display: inline-block;
}

a.nav-link {
  vertical-align: middle;
}

但是，这些元素不会在div 中居中。对齐似乎遵循图像，它位于顶部。文本位于相对于图像的中间。这不是一个坏主意但我需要整个系统img-a-a-a-a垂直居中。在我填充它的那一刻，但是一旦外部DIV的高度发生变化，一切都会破裂。

我做错了什么？

（我发现this post但是在这里他们应用了表格等等。似乎不是最合适的解决方案。也许我错了？

Answer 1

使用 Flexbox

nav, .menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
}

li {
  padding: 0 5px;
}

<nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

使用 CSS表格

nav, .menu {
  display: table;
}

.logo, .menu {
  display: table-cell;
  vertical-align: middle;
}

li {
  padding: 0 15px;
  display: table-cell;
  vertical-align: middle;
}

<nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

Answer 2

您可以参考this blog，其中所有者描述了居中问题。他从2001年开始但是意识到去年夏天的最后一次更新，我很佩服他的坚持。他提供了关于如何以不同版本的CSS为中心的明确例子。

在你的情况下，我建议你像这样使用 display：flex 。请注意，整个居中魔术是从包含控件完成并强加于底层子节点。实际上根本不需要设置 nav-link 的样式（不过请参阅示例下面的注释）。

div.nav-top {
  height: 120px;
  background-color: purple;
  padding: 10px;
  display: flex;
  align-items: center;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  background-position: center center;
  width: 200px;
  height: 100%;
}

a.nav-link { }

这是造型方面的新事物，也是最近实施的。缺点是旧浏览器可能在渲染时遇到问题。但好处是它对设计师来说更直观（除非公司集中管理，否则获取一个不错的浏览器版本并不是很遥远。）

您可能希望使用 margin 作为锚点控件，因为它们会被压扁。此外，尺寸和字体将需要调整。如果你这样做，你可能最终需要我建议不需要的风格，但只有你知道的具体情况。

a.nav-link {
  margin: 10px;
  font-size: 20px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

Answer 3

用垫子控制高度而不是固定高度和边距到中心总是一个好习惯。所以，记住这一点：

将带有徽标的div和带有anchortags的div作为容器div的子项包装。
将紫色框放在那里（或者代表相应的填充顶部和底部的任何内容，以便在您创建的父div中居中。
```
.purple{
    background:purple;
    width:400px;
    display:inline-block;
    padding: 20px 15px;
    height:auto;
}
```

修改

或者，如果你必须在父母身上有一个固定的高度;

.purple{ background:purple; width:400px; display:inline-block; height:60px; padding: 0px 15px; }

请参阅此demo

Answer 4

您可以将元素包装到div中，并使用margin: 0, auto;作为元素和内部容器。

如何在中间垂直对齐图像和文本？

4 个答案: