메뉴에서 텍스트의 수직 위치 조정

Question

빈 배경 이미지와 텍스트가있는 기본 호버 메뉴를 작성하려고합니다.

정상 및 호버 상태의 두 이미지를 만들었으며 텍스트의 경우 코드는 한 행과 여러 개의 td가있는 테이블에 있습니다. 나는 CSS는 호버 색상과 배경 변경을 제어하기 위해 실행해야

      <td align="center"> 
          <div id=menu> 
           <ul style="padding:0px;"> 
           <li><a href="#">WHO WE ARE</a></li> 
           </ul> 
          </div> 

: 이것은 하나의 예입니다.

#menu ul li{ 
font-family:Arial, Helvetica, sans-serif; 
font-weight:700; 
font-size:14px; 
color:#666; 
display:block; 
background-image:url(resource/try.gif); 
height:35px; 
background-repeat:no-repeat; 
width:186px; 
} 

#menu ul li a:hover{ 
font-family:Arial, Helvetica, sans-serif; 
font-weight:700; 
font-size:14px; 
color:#FFF; 
display:block; 
background-image:url(resource/try2.gif); 
height:35px; 
background-repeat:no-repeat; 
width:186px; 
} 

#menu ul li a:visited{ 
text-decoration:none; 
color:#666; 
} 

문제는 모든 일이 잘 작동하지만 내 텍스트가 상단에 정렬되어 내가

나는, 가능한 모든 트릭을 시도 수직 정렬 재산하지만 일한 위치를 변경할 수 없습니다입니다 작동하지 않는 것 같습니다.

아무쪼록 이걸 도와 주시겠습니까?

미리 감사드립니다.

Answer 1

당신이 모든

난 당신이 사용하는 것을 볼 수

Answer 2

나는 패딩 - 가기를 사용합니다.

http://www.w3schools.com/css/css_padding.asp

Answer 3

어쩌면 당신은 당신의 li 요소의 padding-top 속성을 사용하여 작동합니다, padding-top: 10px 같은 것을 추가하려고합니다. 아래쪽 테두리에 맞춰지면 요소의 padding-bottom 속성에 동일한 값을 추가합니다.

편집 :

#menu ul li { 
...your attributes... 
vertical-align: middle; 
line-height: 35px; 
} 

Answer 4

에 대한 라인 높이를 추가해야 다음에 물건을 잠급니다 "패딩 : 0 픽셀을"

이 방법을 시도 위 왼쪽 모서리. http://www.tizag.com/cssT/padding.php은 패딩 사용 방법을 보여줍니다.

사용 해보기 : padding-top : 25px; 패딩 하단 : 25px; 패딩 오른쪽 : 50px; 패딩 왼쪽 : 50px; 당신은 그것이 움직 였다는 것을 알게 될 것입니다.