Alinear el centro de un div de celda de tabla y el hipervínculo correcto

Tengo el siguiente código HTML simplificado:

<div>
  <h2>XXX</h2>
  <img XXX />
  <a href="XXX"><div class="button" id="btback">back</div></a>
</div>

Y también el código CSS:

.button { text-align: center; vertical-align: middle; background-image: url(button.png); width: 120px; height: 60px; display: table-cell;}

#btback { margin: 10px auto 10px auto;}

Básicamente, en un div, hay un título y una imagen, debajo hay un botón. button.pnges la imagen de fondo del botón sin texto. Así que alineo horizontal y verticalmente el texto sobre el fondo del botón.

El primer problema es que el botón no se puede alinear horizontalmente en el centro. Si no lo uso display: table-cell, se puede alinear en el centro, pero el texto no está alineado verticalmente.

El segundo problema es que se puede hacer clic en toda el área horizontal (área de margen) del botón div. Pero quiero que solo se 120pxpueda hacer clic en el área de ancho.

Un ejemplo está aquí: http://jsfiddle.net/cLSUT/

Answer

Puede eliminar ese div interno y simplemente usar la etiqueta a como botón:

http://jsfiddle.net/cLSUT/2/

<div>
  <a class="button" id="btback" href="#">back</a>
</div>

.button { 
    text-align: center; 
    line-height:60px; 
    background-color: red; 
    width: 120px; 
    height: 60px; 
    display:block;
}

#btback { margin: 10px auto 10px auto;}

déjame ver si entendí. prueba con esto

div>a {
   text-align:center;
   overflow:hidden;
}

.button { 
  text-align: center; 
  background-image: url(button.png); 
  width: 120px; 
  height: 60px; 
  display: table-cell;
  line-height: 20px; /*(for example)*/
}

espero que esto pueda ayudarte