對齊中心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單元格，和正確的超鏈接

回答

相關問題