div에서 중간 세로 정렬을 설정하는 방법은 무엇입니까?

Question

html + css에서 가로 메뉴를 만들려고하는데 메뉴 요소의 세로 정렬에 문제가 있습니다. 내 링크를 정점에 배치하는 방법을 알고 있습니까? 이 코드입니다 : HTML :

<div id="navigation"> 

    <div class="nav"><a href="#">Link<br>1</a></div> 
    <div class="nav"><a href="#">Link2</a></div> 
    <div class="nav"><a href="#">Link3</a></div> 
    <div class="nav"><a href="#">Link4</a></div> 

</div> 

CSS :이처럼 보이는

#navigation 
{ 
    float: left; 
    width: 100%; 
    background: #cccccc; 
    text-align:center; 
    box-shadow: 0 3px 2px #555555; 
    height:100px; 
    vertical-align:middle; 
    padding:0 
} 

.nav 
{ 

    display:inline-block; 
    width: 120px; 
    height:100%; 
    padding:0; 
    text-align:center; 
    font-size:20px; 
    vertical-align:middle; 
    margin:0; 

} 

.nav a 
{ 
    color:#333333; 
    text-decoration: none; 
    display:inline-block; 
} 

: 1

Answer 1

이 .nav에 line-height을 추가하고 vertical-align 제거. 여기

.nav 
{ 

    display:inline-block; 
    width: 120px; 
    line-height: 100px; 
    height:100%; 
    padding:0; 
    text-align:center; 
    font-size:20px; 
    vertical-align:middle; 
    margin:0; 

} 

Answer 2

Like so

수직 포함 요소의 높이로 라인 높이를 지정하지 않고 중심 라벨의 텍스트를 얻을 수있는 방법이다.

는 링크 ( .nav a)에 적용하고 display: table-cell .nav a로 먼저 .nav로하고 높이 값을 상속 . 테이블 셀의 경우 vertical-align 속성은 텍스트를 예상대로 가운데에 배치합니다. 이 방법의 장점은 레이블이 두 줄에 걸쳐 있으면 텍스트가 여전히 가운데에 세로 정렬된다는 것입니다.

결과적으로 a의 활성 영역이 더 크고 버튼처럼 동작합니다. 그것은 바람직한 디자인일지도 모르는 디자인입니다.

물론 라벨이 한 단어 (한 줄의 텍스트 만 해당)이면 줄 높이 트릭이 좋은 옵션 일 수 있습니다.

#navigation { 
 
    float: left; 
 
    width: 100%; 
 
    background: #cccccc; 
 
    text-align: center; 
 
    box-shadow: 0 3px 2px #555555; 
 
    height: 100px; 
 
    padding: 0 
 
} 
 
.nav { 
 
    display: inline-block; 
 
    width: 120px; 
 
    height: inherit; 
 
    padding: 0; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    margin: 0; 
 
    border: 1px dashed blue; 
 
} 
 
.nav a { 
 
    color: #333333; 
 
    text-decoration: none; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px dotted blue; 
 
    height: inherit; 
 
    width: inherit; 
 
}

<div id="navigation"> 
 
    <div class="nav"><a href="#">Link1<br>sub-text</a></div> 
 
    <div class="nav"><a href="#">Link2</a></div> 
 
    <div class="nav"><a href="#">Link3</a></div> 
 
    <div class="nav"><a href="#">Link4</a></div> 
 
</div>