css a标签设置成block后，怎么让文字垂直居中

[阿狸Ahri]

唉，好像挺老的问题，但是我怎么弄不到居中的。

我vertical-align试过了，用height 跟line-height相等我试过了，不行。

    <table class="tbMain">
        <tr>
           <td style="border-top: 1px solid #ccc;">
             <a  href="#" onclick="openPage(1,this)">
                <img src="App_Themes/Default/Images/08.png" /><br />
                   免责声明 </a></td>
             <td style="border-top: 1px solid #ccc;">
              <a href="#" onclick="openPage(2,this)">
                   <img src="App_Themes/Default/Images/08.png" /><br />
                     个人信息</a></td>
             <td style="border-top: 1px solid #ccc;">
                  <a href="#" onclick="openPage(3,this)">
                    <img src="App_Themes/Default/Images/08.png" /><br />
                      密码修改</a></td>
        </tr>
</table>

    <style>
.tbMain
    {
     overflow: hidden;
    text-align: center;
   text-shadow: 0 1px 0 #fff;
    width: 100%;
     font-size: 0.8em;
 }

 .tbMain td
     {
  border-bottom: 1px solid #ccc;
  width: 33%;
  border-right: 1px solid #ccc;
overflow: hidden;
 background-color: #eee;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(#fff, #f1f1f1);
  cursor:pointer;
  }

 .tbMain td:hover
 {
 background-image: linear-gradient(#67A2CD, #DBEAF9);
  }
   .tbMain a
  {
  display:block;width:100%; height:100%; line-height:100%;    /*vertical-align:middle;*/
   }
  .tbMain a:hover
  {
 font-weight: bolder;
 color: #fff;
text-decoration: none;
   }

  .tbMain a:link
  {
color: #808080;
  text-decoration: none;
    }
            </style>

后来我以为height:100%,有问题，然后我初始化的时候，动态修改css的line-height跟height的值为具体的值，结果a标签拉的好高好高

[人生难得一只鸡]

你完全可以不设定 display:block

[阿狸Ahri]

引用 5 楼 Return_false 的回复:

你完全可以不设定 display:block

不设定block，a标签没有宽高,但是我的td那么大，a就那么一点，我的打开函数因为是jq mobile的打开方法，所以要 用a的 href链接重定向去的。不能把事件绑在td上 这样放在手机上，用户大部分都是点到了td,但是没人在意点击a，所以a的点击事件触发不了

[阿狸Ahri]

好吧，我真的吧 图片放在背景上了，麻烦死了

[人生难得一只鸡]

即便a 没有那么大，那么你完全可以把时间加在TD上，管你a 多大，用户的实际操作的是td，和a也没有关系 当你通过样式无法处理时，你完全可以换思路 把事件加到父级 或者 更父级 ，样式只是作为显示参考，而不能决定最终用户的实际操作，不是吗？

[ohmygirl]

你的<a>中有img， 自然不会垂直居中的吧

[阿狸Ahri]

引用 1 楼 ohmygirl 的回复:

你的<a>中有img， 自然不会垂直居中的吧

那怎么搞，我这里需要一个img,难道搞成背景去？

[阿狸Ahri]

不对啊，我用 .tbMain a { display:block;width:100%; height:100%;line-height:100%; } 测试， 我删除了图片，结果还是不是居中的啊

[蝶恋花雨]

用padding_top:10px;把字往下。然后这个div的高度在设小点。