html - 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;
}