세로 정렬 레이블

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를 사용하여 원하는 결과를 얻을 수 0 하위 요소에 이 http://jsfiddle.net/e5dg6/3/