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

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

不是一个优雅的解决方案，但如果您制作一个表格，其中一个单元格中的文本和下一个单元格中的图像，它会在中间对齐。

Answer 2

在文本上方的 div 中使用 display: flex: 然后从那里重复

div {

display: flex;
justify-contents: center;
align-items: center;

}

Answer 3

您可以参考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 4

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

Answer 5

使用填充而不是固定的高度和边距来控制高度始终是一种很好的做法。所以，请记住这一点：

• 将带有徽标的 div 和带有锚标签的 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 6

使用 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>