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

css a标签设置成block后，怎么让文字垂直居中_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:47:21

原创

1691人浏览过

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

我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" / alt="css a标签设置成block后，怎么让文字垂直居中_html/css_WEB-ITnose" ><br />                   免责声明 </a></td>             <td   style="max-width:90%">              <a href="#" onclick="openPage(2,this)">                   <img  src="App_Themes/Default/Images/08.png" / alt="css a标签设置成block后，怎么让文字垂直居中_html/css_WEB-ITnose" ><br />                     个人信息</a></td>             <td   style="max-width:90%">                  <a href="#" onclick="openPage(3,this)">                    <img  src="App_Themes/Default/Images/08.png" / alt="css a标签设置成block后，怎么让文字垂直居中_html/css_WEB-ITnose" ><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标签拉的好高好高

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

查看详情

回复讨论(解决方案)

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

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

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

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

你完全可以不设定 display:block

不设定block，a标签没有宽高,但是我的td那么大，a就那么一点，我的打开函数因为是jq mobile的打开方法，所以要
用a的 href链接重定向去的。不能把事件绑在td上

这样放在手机上，用户大部分都是点到了td,但是没人在意点击a，所以a的点击事件触发不了

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

即便a 没有那么大，那么你完全可以把时间加在TD上，管你a 多大，用户的实际操作的是td，和a也没有关系

当你通过样式无法处理时，你完全可以换思路把事件加到父级或者更父级，样式只是作为显示参考，而不能决定最终用户的实际操作，不是吗？