细胞分裂，和正确的超
我有以下简化的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）; width：120px; 身高：60px; display：table-cell;}
#btback {margin：10px auto 10px auto;}
基本上，在一个div中，有一个标题和一个图像，下面是一个按钮。 button.png是没有任何文字的按钮背景图片。 所以我水平和垂直对齐按钮背景上方的文本。
第一个问题是，按钮不能在中心水平对齐。 如果我不使用display: table-cell ，它可以居中对齐，但文本不是垂直对齐的。
第二个问题是，按钮div的整个水平区域（边缘区域）可以被点击。 但我只想要120px宽度的区域可点击。
一个例子是：http://jsfiddle.net/cLSUT/
您可以删除该内部div，只需使用一个标签作为按钮：
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;}
让我看看我是否明白。 试试这个
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)*/
}
我希望这可以帮助你
链接地址: http://www.djcxy.com/p/75829.html