css - 使完整的 div 可点击 (html)

Question

我有以下问题! 我有按钮 (div)，里面有一个文本超链接。 我希望这个超链接在整个 div 上都可以点击。我通过这样做使它起作用

HTML:

echo '<div id="tagsul"><a href="' . get_category_link( $category->term_id ) . '"       style="color:#FFF;" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a></div> ';

CSS:

#tagsul{
width:190px;
height:40px;
margin-right:5px;
margin-left:5px;
background:#82e1a1;
text-align:center;
float:left;
margin-top:10px;
}

#tagsul a {
display:block;
height: 100%;
width: 100%;
text-decoration:none;
}

一切正常。但是文本现在显示在 div 的中间顶部。但是我希望它从两个 Angular (高度和宽度)显示在div的中间

我想我可以用顶部填充做一些事情，但这不起作用，因为整个#tagsurl 是可点击的，所以当我在顶部使用填充时，按钮下方也会有一个部分也可以点击......

Answer 1

#tagsul{
width:190px;
height:40px;
margin-right:5px;
margin-left:5px;
background:#82e1a1;
text-align:center;
float:left;
margin-top:10px;
vertical-align: middle;
display: table;
}

#tagsul a {
display:block;
height: 100%;
width: 100%;
text-decoration:none;
vertical-align: middle;
display: table-cell;
}

Demo