使用css垂直对齐文本

Question

我想要得到这个：

但是2小时后我就有了这个：

问题是我不知道如何在不使用javascript的情况下对齐按钮上的文本，仅使用css。无论如何没有Javascript可以做到这一点？这是我的代码：

<div class='chart_button'>
    <div>Pain Relief</div>
</div>
<div class='chart_button'>
   <div>Pain relief by attack</div>
</div>

这是css：

.button_set .chart_button{
    display: inline-table;
    height: 50px;
    width: 110px;
    background: url('../img/button-chart.png');
    font-size: 14px;
    font-weight: bold;
    color: #717171;
    text-align: center;
    margin-right: 1px;
    cursor: pointer;
    vertical-align: bottom;
}

Answer 1

添加此CSS：

.chart_button>div {
    display:table-cell;
    vertical-align:middle;
}