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

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 Table

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

使用边距而不是固定高度和居中边距来控制高度始终是一个好习惯。所以，记住这一点：

用徽标包裹 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 3

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

Answer 4

可以参考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 { }

这是样式方面的新事物，最近才实现。这样做的缺点是较旧的浏览器可能无法呈现它。但好处是它对设计人员来说更直观（并且获取一个像样的浏览器版本并不遥远，除非由公司集中管理）。

您可能希望对锚控件使用边距，因为它们将被挤压在一起。此外，大小和字体也需要调整。如果你这样做，你可能最终需要我建议不需要的样式，但只有你知道这些细节。

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

Answer 5

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

Answer 6

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

div {

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

}

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

How to align an image and text vertically in the middle?

html

css

vertical-alignment