높이가 고정 된 컨테이너에서 요소를 세로로 가운데에 맞 춥니 다

Question

픽셀 기반 탐색 막대가 필요한 웹 사이트가 있습니다 (이 경우 height: 80px).

문제는 내가 ul과 li 개의 요소를 세로로 가운데에 맞출 수 없다는 것입니다.

필자는 jsfiddle에 표시된대로 top:50%; transform: translate(0,-50%)을 사용해 보았지만 플렉스 포지셔닝도 시도했지만 아무도 작동하지 않았습니다.

Jsfiddle : https://jsfiddle.net/agreyfield91/w3s8cj92/

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

디스플레이 플렉스를 추가하고 정렬 자아 센터 : 당신의 코드를 훨씬 더 간단 할 수 있었던 것처럼 https://jsfiddle.net/w3s8cj92/1/

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
    display: flex; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 50%; 
 
    align-self: center; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 2

당신 하나가 position: relativenav ul-nav에와 position: absolute을 추가해야합니다 (일 top: 50%; transform: translate(0,-50%);를 얻을 수 있습니다) 아니면 그냥 nav에 display: flex; align-items: center을 사용할 수 있습니다. 나는 단지 flexbox를 사용할 것이다.

header { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    background: #ddd; 
 
} 
 

 
* { 
 
    color: transparent 
 
} 
 

 
nav { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: bisque; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    padding: 15px; 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    margin: 0 10px; 
 
}

<header class="nav-down"> 
 
    <nav class="headernav"> 
 
    <ul> 
 
     <li><a href="#">Gig</a></li> 
 
     <li><a href="#">ity</a></li> 
 
     <li><a href="#">element</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 3

보인다 :

만약 블록의 고정 높이를 가질 때 등에

nav { 
 
    height: 80px; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; /* horizontal alignment of child elements (optional) */ 
 
    background-color: bisque; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    color: #aaa; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
    display: flex; 
 
    align-items: center;  /* vertical alignment of text */ 
 
    border: 1px dashed red; 
 
} 
 

 
a + a { 
 
    margin-left: 20px; 
 
}

<nav> 
 
    <a href="#">Gig</a> 
 
    <a href="#">ity</a> 
 
    <a href="#">element</a> 
 
</nav>

Answer 4

1,515,, 중간 수직 배향 인라인 [- 블록] 요소없이 랩 컨테이너 엘리먼트 중앙 수있다.

.vertical-container { 
 
    height: 80px; 
 
    border: 1px solid black; 
 
    white-space: nowrap; 
 
    /* this prevents vertical block to "fall out" of container */ 
 
} 
 

 
.vertical-aligner { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    width: 0; 
 
} 
 

 
.vertical-content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    white-space: normal; 
 
    /* reset white-space for content */ 
 
}

<div class="vertical-container"><span class="vertical-aligner"></span><span class="vertical-content">Text that should be vertically middle of container</span></div>

나는 그에 따라 바이올린을 업데이트 한 : https://jsfiddle.net/w3s8cj92/2/

P.S.을 나는 더 많은 정보를 제공하고 싶지만, 나중에

Answer 5

CSS는 당신이 필요로하는 모든`위치를 추가하는 것입니다

header { 
    height: 80px; 
    position: fixed; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
    display: table; 
} 

footer { background: #ddd;} 
* { color: transparent} 
nav { 
    height: 100%; 
    width: 100%; 
    background-color: bisque; 
} 
nav ul { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
    height: 80px; 
} 
nav ul li { 
    display: inline-block; 
    float: left; 
} 
nav ul li a { 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
    color: #aaa; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0 10px; 
}