목록의 가운데에 텍스트를 수직으로 정렬하는 방법

Question

텍스트를 세로로 가운데에 정렬하려면 어떻게합니까? 나는 당신이 볼 수 있듯이, 많은 방법을 시도했지만, 아무것도 작동하지 않는 것 같습니다. 아무리 내가하려고 내가 그냥 완전히 중심의 텍스트를 얻으려면

<ul class="nav"> 
<li class="nav"><a href="#home">Home</a></li> 
<li class="nav"><a href="#news">News</a></li> 
<li class="nav"><a href="#contact">Contact</a></li> 
<li class="nav"><a href="#about">About</a></li> 
</ul> 

:하지만,

다음은 JSFiddle

없습니다 그리고 여기에 CSS입니다 :

ul.nav { 
    border:1px solid #ccc; 
    border-width:1px 0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
    vertical-align: middle; 
    height: 100px; 
    vertical-align:middle; 
} 
/* this styles each link when the mouse is NOT hovered over */ 
li.nav { 
    display: table-cell; 
    vertical-align: middle; 
    height:100%; 
    align-items: center; 
    vertical-align:middle; 
} 

li a { 
    display:block; 
    height:100%; 
    width:100%; 
    text-decoration:none; 
    vertical-align: middle; 
    align-items: center; 
    vertical-align:middle; 
} 

li a:hover { 
    background-color: #0099FF; 
    color:White; 
    vertical-align: middle; 
    height:100%; 
    align-items: center; 
    vertical-align:middle; 
} 

그리고 HTML 항상 맨 위에 머물러있는 것처럼 보입니다.

Answer 1

텍스트를 세로로 정렬하는 간단한 방법 중 하나는 목록 항목에 line-height:100px을 설정하는 것입니다.

jsFiddle example

li.nav { 
    display: table-cell; 
    vertical-align: middle; 
    height:100%; 
    align-items: center; 
    vertical-align:middle; 
    line-height:100px; 
} 

또는, 두 번째 옵션에 대한 링크에서 display:block 규칙 (여기없는 줄 높이 변화)

jsFiddle example

하는 것으로 제거 , l을 원한다면 링크의 패딩을 조정해야합니다. 더 많은 공간을 차지할 잉크.