전체 div를 클릭 할 수있게 만들기 (html)

Question

다음과 같은 문제가 있습니다! 버튼 (divs) 안에 텍스트 하이퍼 링크가 있습니다. 이 하이퍼 링크를 div 전체에서 클릭 가능하게하고 싶습니다.

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

이를 내가는이

HTML을 수행하여 작업을 얻었다. 그러나 텍스트는 이제 div의 중간 상단에 표시됩니다. 하지만 두 관점 (높이와 너비)에서 div의 중간에 표시하고 싶습니다

나는 위쪽 패딩으로 뭔가를 할 수 있다고 생각했지만, 전체 #tagsurl이 클릭 할 수 있기 때문에이 나던 일을 할 수 있다고 생각했습니다. 상단에 패딩을 사용하면 버튼 아래에 클릭 할 수있는 부분이 생깁니다.

Answer 1

패딩을 적용 할 때마다 높이를 편집해야합니다. 그것은 당신의 문제를 해결해야합니다.

Answer 2

몇 가지 옵션이 있습니다. div를 href 태그에 넣고 div 스타일을 지정하면 클릭 할 수있게되거나 onclick 매개 변수를 사용하고 JavaScript를 사용할 수 있습니다.

Answer 3

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