<div class="container">
  <div class="box apple">
    <p>りんご</p>
  </div>
  
  <div class="box orange">
    <p>みかん</p>
  </div>
  
  <div class="box grape">
    <p>ぶどう</p>
  </div>
</div>
.container{
  display: table;
  width: 600px;
  height: 200px;
}

.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}

.apple{
  background: #ED3B2B;
  vertical-align: middle;
}

.orange{
  background: #E4642C;
  vertical-align: top;
}

.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.