Question

我有一个CSS问题。我即将使用表而不是CSS，所以我觉得是时候问这里了！我简化了一切： http://jsfiddle.net/Rue74/1/

<div id="dashboard_layer">
</div>

我有一个包含3个块的图层： - 左侧有1个徽标 - 右侧1个徽标 - 中间的每个左侧空间

我希望我的两个徽标使用所有垂直空间。（我不希望中心div的任何内容能够在徽标下）。我希望这两个徽标垂直居中。在中间，我有一个过滤器列表（基本上是按钮）。前两个是＆＃34;双倍高度＆＃34;和其他的＆＃34;简单的高度＆＃34;。我希望它们都在同一条线上，但是如果没有空格，第二行应该从第3个元素开始（因为第一个是双倍高度！），第三行应该从第一个元素开始（作为双倍高度不再影响这条线）。最后的困难......我希望所有这些按钮垂直对齐！

我真的不知道如何做到这一点，除了使用表...这似乎不是最好的解决方案...... 如果您有任何其他想法，请告诉我们！

谢谢！

Answer 1

看看Flexbox，你可以轻松地垂直对齐

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

你可以使用绝对位置（左/右，取决于你需要的浮动）

 .selector{
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
 }

http://codepen.io/sebastianekstrom/pen/kzEhe

Answer 3

你的div有设定的高度吗？如果是这样，您可以利用它：

http://jsfiddle.net/stacigh/L6S3j/

.mydiv {
  background-image: url('http://placekitten.com/g/400/300');
  width: 400px;
  height: 300px;
  margin: 0px auto;
  margin-top: calc(50vh - 150px);
}

一些注意事项：子IE9不支持calc（），并且在版本34之前的webkit中的calc（）函数中不支持视口单元：http://caniuse.com/#search=vh

垂直居中浮动div

3 个答案: