Точка с вертикальным выравниванием

Question

У меня есть ярлык, который я назвал в виде кнопки. Проблема, с которой я сталкиваюсь, - это текст не выравнивается по вертикали, когда высота расширяется, чтобы соответствовать ярлыку с большим количеством текста. Я хотел бы, чтобы обе метки были равны по высоте с вертикально выровненным текстом в середине. Как вы можете видеть в демонстрации, выравнивание текста также не сосредоточено. Кроме того, как бы вы добавляли промежуток между двумя ячейками таблицы? Первоначально у меня был контейнер на 100%, причем каждая метка составляла 49% и 1% -ный запас между двумя ярлыками.

http://jsfiddle.net/jasonniebauer/e5dg6/2/

Обновлено:

HTML

<div id="table6"> 
<input type="radio" id="online_paper2" name="tax_forms"/> 
<label for="online_paper2"> 
     Online + Paper 
</label> 
<input type="radio" id="online_only2" name="tax_forms"/> 
<label for="online_only2"> 
    Online Only 
</label> 
</div> 

CSS

#table6 { 
    width: 15rem; 
} 

#table6 input[type="radio"] + label { 
      box-sizing:border-box; 
      padding: 1rem 3rem 1rem 3rem; 
      width: 49%; 
      display: inline-block; 
      color: #BDC3C7; 
      background-color: #F2F2F2; 
      text-align: center; 
      vertical-align: middle; 
      cursor: pointer; 
      border-radius: 3px; 
      margin-bottom: 1rem; 
      font-size: 1.125em; 
     } 

input[type="radio"] { 
    display: none; 
} 

Answer 1

Вы можете получить желаемый результат с помощью display: table на элементе обертке, и display: table-cell на дочерних элементах.

Смотрите эту обновленную jsfiddle: http://jsfiddle.net/e5dg6/3/