简单的CSS查询:在容器中垂直浮动块

Question

这应该很简单，但我无法理解。。。

http://www.coelandscapes.co.uk/是一个相当古老的网站，有一个简单的CMS。我试图让菜单与徽标底部垂直对齐，但不能使用绝对值（因为元素的数量可能会改变）。

有人有什么想法吗？

感谢

Answer 1

flexbox非常适合垂直对齐项目。将此添加到您的#菜单样式：

#menu {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  width: 610px;
  height: 245px;
  padding: 0 0 0 12px;
}

根据您想要支持的浏览器，您可能需要添加一些供应商前缀：http://caniuse.com/#search=flex

Answer 2

只需将position:relative放在父级上，子级就应该具有以下css：

position: absolute;
top: 50%;
transform: translateY(-50%);