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

阿狸Ahri 2015-03-26 11:32:14
唉,好像挺老的问题,但是我怎么弄不到居中的。

我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标签拉的好高好高
...全文
3135 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
蝶恋花雨 2015-03-26
  • 打赏
  • 举报
回复
用padding_top:10px;把字往下。然后这个div的高度在设小点。
阿狸Ahri 2015-03-26
  • 打赏
  • 举报
回复
不对啊,我用 .tbMain a { display:block;width:100%; height:100%;line-height:100%; } 测试, 我删除了图片,结果还是不是居中的啊
阿狸Ahri 2015-03-26
  • 打赏
  • 举报
回复
引用 1 楼 ohmygirl 的回复:
你的<a>中有img, 自然不会垂直居中的吧
那怎么搞,我这里需要一个img,难道搞成背景去?
ohmygirl 2015-03-26
  • 打赏
  • 举报
回复
你的<a>中有img, 自然不会垂直居中的吧
  • 打赏
  • 举报
回复
即便a 没有那么大,那么你完全可以把时间加在TD上,管你a 多大,用户的实际操作的是td,和a也没有关系 当你通过样式无法处理时,你完全可以换思路 把事件加到父级 或者 更父级 ,样式只是作为显示参考,而不能决定最终用户的实际操作,不是吗?
阿狸Ahri 2015-03-26
  • 打赏
  • 举报
回复
好吧,我真的吧 图片放在背景上了,麻烦死了
阿狸Ahri 2015-03-26
  • 打赏
  • 举报
回复
引用 5 楼 Return_false 的回复:
你完全可以不设定 display:block
不设定block,a标签没有宽高,但是我的td那么大,a就那么一点,我的打开函数因为是jq mobile的打开方法,所以要 用a的 href链接重定向去的。不能把事件绑在td上 这样放在手机上,用户大部分都是点到了td,但是没人在意点击a,所以a的点击事件触发不了
  • 打赏
  • 举报
回复
你完全可以不设定 display:block

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧