2

次の問題があります！内部にテキスト ハイパーリンクを含むボタン (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全体がクリック可能であるため、これは機能しません。上部にパディングを使用すると、ボタンの下にもクリック可能な部分があります...

4

4 に答える 4

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

デモ

于 2013-01-19T20:19:08.883 に答える
0

次の作品：

#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;
}
于 2013-01-19T20:21:49.130 に答える
0

いくつかのオプションがあります。div を href タグに配置してスタイルを設定すると、クリック可能になるか、onclick パラメータを使用して JavaScript を使用できます。

于 2013-01-19T20:18:39.243 に答える
0

パディングを適用するときは常に、高さを編集することを忘れないでください。それはあなたの問題を解決するはずです。

于 2013-01-19T20:13:22.027 に答える