After the css a tag is set to block, how to center the text vertically_html/css_WEB-ITnose

Alas, it seems to be an old question, but I can’t get it centered.

I tried vertical-align. I tried using height to be equal to line-height, but it didn’t work.

    <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>

Later I thought there was something wrong with height:100%, and then when I initialized, I dynamically modified the css line- The values ​​of height and height are specific values. As a result, the a tag is pulled very high

Reply to the discussion (solution)

Yourc354d6708c0d848d93928c59899e7818, it will naturally not be vertically centered

If there is an img in your 3499910bf9dac5ae3c52d5ede7383485, naturally it will not be vertically centered

Then what should I do? I need an img here. Can I use it as a background?

No, I use .tbMain a
{
display:block;width:100%; height:100%;line-height:100%;
              }
Test ,
I deleted the image, but the result is still not centered

Use padding_top:10px; to move the text down. Then set the height of this div to a smaller point.

You don’t have to set display:block

You don’t have to set display:block

If you don’t set block, the a tag has no width and height. But my td is so big, and a is just a little bit small. Because my opening function is the opening method of jq mobile, I have to
redirect it with the href link of a. You cannot tie the event to td

If you put it on a mobile phone like this, most users will click on td, but no one cares about clicking a, so the click event of a cannot be triggered

Okay , I really do. The picture is placed on the background, which is very troublesome

Even if a is not that big, then you can add time to TD. No matter how big your a is, the user actually operates td , it has nothing to do with a

When you cannot handle it through styles, you can completely change your mind and add the event to the parent or change the parent. The style is only used as a display reference and cannot determine the actual operation of the end user. , isn’t it?