如何使浮动元素垂直居中

Question

* {
  margin: 0px;
}
.container {
  background: #ccc;
  line-height: 50px;
  verticle-algn: middle;
  clear: both;
}
.float {
  overflow: hidden;
  float: right;
}

<div class="container">
  <button>inside</button>
  <button class="float">float</button>
</div>

请检查此示例。我希望.float元素位于内部元素.container的中间。但是无论我触发BFC还是添加pseudo element，我都无法清除float元素的影响。我认为边缘不是解决此问题的最佳方法。感谢您的帮助，能否告诉我如何解决此问题。

Answer 1

用verticle-algn: middle替换text-align:center

Answer 2

按您的预期尝试它的工作。