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

我有以下简化的HTML代码：

XXX

还有CSS代码：

.按钮{ 文本对齐：居中； 垂直对齐：中间对齐； 背景图片：url（button.png）； 宽度：120px； 高度：60px； 显示：表格单元格；}

#btback{ 边距：10px自动10px自动；}

基本上，在一个div中，有一个标题和一个图像，下面是一个按钮

button.png

是没有任何文本的按钮背景图像。因此，我水平和垂直对齐按钮背景上方的文本

第一个问题是，按钮不能在中心水平对齐。如果我不使用

display:table cell

，它可以居中对齐，但文本不会垂直对齐

第二个问题是，可以单击按钮div的整个水平区域（边距区域）。但是我只想点击

120px

宽度区域

---

这里有一个例子：

让我看看我是否理解。 试试这个

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)*/
}

---

我希望这可以帮助您

您可以删除该内部div，只需使用a标记作为按钮：

.按钮{
文本对齐：居中；
线高：60px；
背景色：红色；
宽度：120px；
高度：60px；
显示：块；
}
#btback{margin:10px auto 10px auto；}

用一个示例创建一个JSFIDLE它不起作用。1） 这不是一个溢出问题；2） 我不知道你为什么用线的高度来代替垂直对齐。

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)*/
}

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