네비게이션 정렬 문제

나는 내 탐색의 선택한 버전에 사용할 4 개 거품 구성된 스프라이트가, 즉 다음과 같습니다네비게이션 정렬 문제

enter image description here

의 가장 좋은 예를 내가 노력하고있어 달성 할 수있는 것은 Dribbble입니다. 헤더 탐색 선택 탐색을 살펴보십시오. 그들은 이미지를 사용하는 반면 순수 CSS를 사용하여 모양을 얻는 것을 제외하고는 "잡스"링크를 덮기 위해 광산과 비슷한 버블을 사용하고 있습니다. 그것은 다음과 같습니다 지금

.inline-block{ 
    /* Inline block class for li navigation */ 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
} 
#header li a{ 
    width:40px; /* without padding = 110px*/ 
    height:15px; /* without padding = 31px*/ 
    padding:8px 35px; 
} 
#header li a.selected{ 
    background: url('../img/btn-header-sprite.png') 0 -1px; 
    display:inline-block; 
} 
#header li a{ 
    color:#FFF; 
    font-weight:bold; 
    font-size:15px; 
} 
#header li:hover{ 
    background-position:0 -34px; 
} 
#header li:active{ 
    background-position:0 -67px; 
}

: 여기

내 코드의

패딩 만약 내가 개별적으로 각각의 패딩을 정렬하는 데, 당신은 볼 수있어 이 올바르지 않으면 텍스트가 거품의 중앙에 있지 않습니다. 각 거품을 개별적으로 채우기보다 형식을 지정하는 더 좋은 방법이 있습니까?

감사합니다. 더 많은 설명이 필요하면 그냥 말하십시오!

출처

2013-02-12 Muhambi

당신이 시도 텍스트 정렬을 시도 할 수 있습니다 : 센터 '와'수직 알긴 : middle'를? jsFiddle로 데모를 추가 할 수 있습니까? –

가능한 경우 이미지를 사용하지 마십시오. IE8과 IE9를 잘 지원해야하는 경우가 아니면 교차 브라우저를 지원할 수있는 더욱 매끄러운 모양의 단추를 만들 수 있습니다. –

당신은`

display:table-cell; 
vertical-align: middle;

출처

2013-02-12 03:05:41

네비게이션 정렬 문제

답변

관련 문제