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

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

WBOY
WBOYOriginal
2016-06-24 11:47:211557Durchsuche

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

我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也没有关系

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn