css - 垂直对齐 inline-block 容器

Question

如何在不明确指定 .container 高度的情况下(垂直)在中间对齐 .content？

<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>