센터 탐색 모음

Question

내가 텍스트를 중심으로 탐색 모음을 만들려면

,하지만 내 CSS 코드 리 요소 내부 하이퍼 링크는 리튬의 상단 모서리에있는 하이퍼 링크를 배치합니다.

CSS :

#navigation { 
    clear: both; 
    margin: 0 auto 5px; 
    margin-top: 0; 
    height: 6%; 
    padding: 0 5px; 
    position: relative; 
    z-index: 1; 
} 

#navigation a { 
    height: 10%; 
    width: 50px; 
    color: red; 
    vertical-align: center; 
    text-align: center; 
    text-decoration: bold; 
} 

li { 
    border-top: solid; 
    border-right: solid; 
    border-left: solid; 
    border-bottom: none; 
    padding-left: 1px; 
    height: 51px; 
    width: 18%; 
    background-image: url('../images/tab-selected.png'); 
    background-repeat: repeat-x-y; 
    border-color: #F0F0F0; 
    display: inline-block; 
    padding-left: 1px; 
} 

HTML : 수직 중심 뭔가 여러 가지 방법이 있습니다

<nav id="navigation"> 
    <ul> 
    <li ><a href="overview.asp">overview</a></li> 
    <li ><a href="overview.asp">overview</a></li> 
</ul> 
</nav> 

Answer 1

.

링크의 단어를 알고 있고 줄 바꿈이 없다는 것을 알고 있다면 line-height:51px;을 앵커 (LI의 높이와 동일 함)에 추가 할 수 있습니다. 당신을 위해 그런데 http://jsfiddle.net/vMLpL/

---

, 조언 : : 여기

는 바이올린의 경계에 대한

• , 당신은 단지 border-bottom:none;처럼 바닥에 아무 것도주지 border:1px solid #f0f0f0;을 사용할 수 있습니다 모든면을 선언하는 대신.

• BG가 X와 Y를 모두 반복하도록하려면 background-repeat은 repeat이고 repeat-x-y이 아닙니다.

• vertical-align의 경우 center이 없습니다. 그것은 top, middle, bottom 및 baseline입니다. 그러나 인라인 요소에 대해서만 작동 외에 또는 (A TD의 valign="middle" atribute처럼 작동합니다) display:table-cell 요소에 대한 다른 인라인 요소로 간주한다.

Answer 2

이 시도 :

1. 을 당신의 "리"선택에서 다음을 제거합니다
   • height: 51px;
2. 이 당신의 "리"선택에 다음을 추가
   • text-align: center;
   ,
   • line-height: 51px;