对齐中心TABEL单元格，和正确的超链接

我有以下简单的HTML代码：对齐中心TABEL单元格，和正确的超链接

<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; 显示：表细胞;}

#btback { 余量：10px的汽车自动10px的;}

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

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

第二个问题是，可以点击按钮div的整个水平区域（边缘区域）。但我只想要点击宽度区域120px。

一个例子是在这里：http://jsfiddle.net/cLSUT/

来源

2011-11-25 DrXCheng

做一个jsfiddle例如 – Petah

您可以删除内股利和只使用一个标签的按钮：

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

来源

2011-11-25 03:42:25

让我看看我的理解。尝试用这种

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

我希望这可以帮助你

来源

2011-11-25 03:38:58 MCSI

它不起作用。 1）它不是溢出问题; 2）我不知道你为什么用行高替换垂直对齐。 – DrXCheng

对齐中心TABEL单元格，和正确的超链接

回答

相关问题