在内联块容器中垂直对齐

Question

如何在中间（垂直）对齐.content而不明确指定.container的高度？

<div>
    <div class="container"></div>
    <div class="content"></div>
    <div class="one"></div>
</div>

<style>
.container {
    border:1px solid red;
    display: inline-block;
}
.content {
    height: 50px;
    width: 70px;
    display:inline-block;
    vertical-align:middle;
    border:1px solid green;
}
.one {
    height: 200px;
    width: 20px;
    background: red;
    display: inline-block;
}
</style>    

Answer 1

尝试为两个子元素指定vertical-align: middle：

.container {
  border: 1px solid red;
  display: inline-block;
}
.content {
  height: 50px;
  width: 70px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid green;
}
.one {
  height: 200px;
  width: 20px;
  background: red;
  vertical-align: middle;
  display: inline-block;
}

<div class="container">
  <div class="content">text</div>
  <div class="one">text</div>
</div>