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）;       宽度：120px;       身高：60px;       display：table-cell;}

#btback {       保证金：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;}

Answer 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和正确的超链接

2 个答案: