Heim > Artikel > Web-Frontend > css a标签设置成block后,怎么让文字垂直居中_html/css_WEB-ITnose
唉,好像挺老的问题,但是我怎么弄不到居中的。
我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>
不对啊,我用 .tbMain a
{
display:block;width:100%; height:100%;line-height:100%;
}
测试,
我删除了图片,结果还是不是居中的啊
用padding_top:10px;把字往下。然后这个div的高度在设小点。
你完全可以不设定 display:block
你完全可以不设定 display:block
好吧,我真的吧 图片放在背景上了,麻烦死了
即便a 没有那么大,那么你完全可以把时间加在TD上,管你a 多大,用户的实际操作的是td,和a也没有关系
当你通过样式无法处理时,你完全可以换思路 把事件加到父级 或者 更父级 ,样式只是作为显示参考,而不能决定最终用户的实际操作,不是吗?