cell div, and the correct hyper

I have the following simplified HTML code:

<div>
  <h2>XXX</h2>
  <img XXX />
  <a href="XXX"><div class="button" id="btback">back</div></a>
</div>

And also the CSS code:

.button { text-align: center; vertical-align: middle; background-image: url(button.png); width: 120px; height: 60px; display: table-cell;}

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

Basically, in a div, there is a headline and an image, below is a button. button.png is the button background image without any text. So I horizontally and vertically align the text above the button background.

The first problem is, the button cannot be horizontally aligned in center. If I don't use display: table-cell , it can aligned in center, but the text is not vertically aligned.

The second problem is, the entire horizontal area (margin area) of the button div can be clicked. But I want only the 120px width area to be clickable.

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

---

You can remove that inner div and just use the a tag as the button:

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

---

let me see if I understood. try with this

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

I hope this can help you

链接地址: http://www.djcxy.com/p/75830.html

上一篇: 如何将元素死点定位在高度可变的流体布局中？

下一篇: 细胞分裂，和正确的超