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的中间顶部。但我希望它从两个视角（高度和宽度）显示在div的中间

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

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

Answer 2

请记住在应用填充时编辑高度。它应该解决你的问题。

Answer 3

有几种选择。你可以将div放在href标签中并设置div的样式，它可以点击，也可以使用onclick参数并使用JavaScript。

Answer 4

以下作品：

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

#tagsul a {
    text-decoration:none;
    vertical-align: middle;
    display: table-cell;
}

使完整的div可点击（html）

4 个答案: