html - 将表格单元格 div 和正确的超链接居中对齐

Question

我有以下简化的 HTML 代码:

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

还有 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;}

基本上，在一个div中，有一个标题和一张图片，下面是一个按钮。 button.png 是没有任何文字的按钮背景图片。所以我水平和垂直对齐按钮背景上方的文本。

第一个问题是，按钮不能水平居中对齐。如果我不使用display: table-cell，它可以居中对齐，但文本不是垂直对齐的。

第二个问题，按钮div的整个水平区域(外边距区域)都可以被点击。但我只希望 120px 宽度区域可点击。

这里有一个例子:http://jsfiddle.net/cLSUT/

Answer 1

您可以删除内部的 div 并只使用 a 标签作为按钮:

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