html - 垂直对齐不同大小的字体

Question

我构建了以下 html 列表和 css 代码，试图垂直对齐 li 元素的内容。 “自行车”“设备”不应该在同一行，它们应该在两行但在正下方。由于行高，使用以下代码它会崩溃。但是我怎样才能以相同的方式在中心对齐 stats_box_desc 垂直和 stats_box_figure ，因为两者的字体大小不同？

它应该是这样的:

谢谢!

http://codepen.io/anon/pen/foIjd

HTML

<ul class="massp_list">
    <li>
        <span>Annual spending habits</span>
    </li>
    <li class="massp_stats_box">
        <div class="stats_box_desc">Bikes</div>
        <div class="stats_box_figure">$2,274</div>
    </li>
    <li class="massp_stats_box">
        <div class="stats_box_desc">Race Fees</div>
        <div class="stats_box_figure">$564</div>
    </li>
    <li class="massp_stats_box">
        <div class="stats_box_desc">Bike<br/>Equipment</div>
        <div class="stats_box_figure">$524</div>
    </li>
</ul>

CSS

.massp_list {
  list-style-type:none;
  margin:0;
}

.massp_list li {
  margin: 10px;
}

.massp_stats_box {
  background-color: #007cc1;
  width: 180px;
  height: 56px;
  opacity:0.9;
}

.stats_box_desc, .stats_box_figure {
  display:inline-block;
  vertical-align:middle;
  height:56px;
  line-height:56px;
}

.stats_box_desc {
  font-size: 14px;
  color:black;
  text-transform:uppercase;
  margin-right:10px;
}

.stats_box_figure {
  font-size: 38px;
  color:black;
  text-transform:uppercase;
}

Answer 1

演示: http://jsfiddle.net/nGk7x/1/

.massp_list {
    list-style-type:none;
    margin:0;
}
.massp_list li {
    margin: 10px;
}
.massp_stats_box {
    background-color: #007cc1;
    width: 180px;
    height: 56px;
    opacity:0.9;
}
.stats_box_figure {
    display:inline-block;
    vertical-align:middle;
    height:56px;
    line-height:56px;
}
.stats_box_desc {
    display:inline-block;
    vertical-align:middle;
    font-size: 14px;
    color:black;
    text-transform:uppercase;
    margin-right:10px;
    text-align:right;
}
.stats_box_figure {
    font-size: 38px;
    color:black;
    text-transform:uppercase;
}