使用css垂直对齐文本

Question

I am trying to get this:

But after 2 hours I have this:

The problem is I have no idea of how align the text on the button without using javascript, only with css. There is anyway to do this without Javascript? This is my code:

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

and here is the 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

Add this CSS:

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