首页 >web前端 >html教程 >css a标签设置成block后,怎么让文字垂直居中_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:47:211588浏览

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

我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标签拉的好高好高


回复讨论(解决方案)

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

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


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

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

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

你完全可以不设定 display:block

你完全可以不设定 display:block


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

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

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

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn