back</div> </div> また、CSSコード: .button"> back</div> </div> また、CSSコード: .button"> back</div> </div> また、CSSコード: .button" />

タブセルのdivと正しいハイパーリンクの中心を揃える

私は以下の簡略化されたHTMLコードを持っています:

<div>
  

XXX

<div class="button" id="btback">back</div> </div>

また、CSSコード:

.button {       text-align:center;       縦線:中央;       背景画像:url(button.png);       幅:120ピクセル。       高さ:60px;       display:table-cell;}

     

#btback {       margin:10px auto 10px auto;}

基本的に、divには見出しと画像があり、下にはボタンがあります。 button.png はテキストのないボタンの背景画像です。そこで、ボタンの背景の上にテキストを水平方向と垂直方向に整列させます。

第1の問題は、ボタンを中央で水平に揃えることができないことです。 display:table-cell を使用しない場合は、中央に揃えることができますが、テキストは垂直に配置されません。

第2の問題点は、ボタンdivの水平領域(マージン領域)全体をクリックできることである。しかし、 120px の幅の領域だけをクリック可能にします。

An example is here: http://jsfiddle.net/cLSUT/

0
例を使ってjsfiddleを作る
追加された 著者 Petah,

2 答え

その内側のdivを削除し、ボタンとしてaタグだけを使用することができます:

http://jsfiddle.net/cLSUT/2/

<div>
  back
</div>

.button { 
    text-align: center; 
    line-height:60px; 
    background-color: red; 
    width: 120px; 
    height: 60px; 
    display:block;
}

#btback { margin: 10px auto 10px auto;}
1
追加された

私が理解すれば私に見せてください。 試してみてください

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

これがあなたを助けることができればと思います

0
追加された
それは動作しません。 1)オーバーフローの問題ではありません。 2)なぜ私はあなたがラインの高さと垂直線を置き換えるか分からない。
追加された 著者 DrXCheng,