세로로 고정 된 가운데 맞춤 내비게이션 막대

Question

웹 페이지를 다시 디자인 할 때 측면 탐색 모음이 있습니다. 이 막대는 고정되어 있으며 페이지를 아래로 스크롤 할 때 수레됩니다. 투명하고 화면을 따라 쉽게 탐색 할 수 있습니다. id = "navbar"인 nav 요소입니다. 필요한 것은이 탐색 모음을 모든 화면에서 세로 가운데에 배치하는 것입니다. 고해상도 스크린에서는 높게 위치합니다. 저해상도 스크린에서는 낮게 위치합니다. 이 막대를 모든 화면에 가운데 놓는 방법은 무엇입니까? 지금까지 내 코드의 덩어리입니다. 필요한 경우 더 제공 할 수 있습니다.

<div id="row"> 
    <nav id="navbar"> 
     <ul> 
      <li class="button"><a href="page.html">page</a></li> 
      <li class="button"><a href="page.php">page</a></li> 
      <li class="button"><a style="color: red;"href="page.html">page</a></li> 
      <li class="button"><a href="page.html">page</a></li> 
      <li class="button"><a href="page.html">page</a></li> 
      <li class="button"><a href="page.php">page</a></li> 
      <li class="button"><a href="page.html">page</a></li> 
      <li class="button"><a href="page.html">page</a></li> 
      <li class="button"><a href="page.html">page</a></li> 
     </ul> 
    </nav> 
    <div id="an id"> 
     <h1>some text</h1> 
     <h3>some text</h3> 
     <h5>some text</h5> 
    </div> 
</div> 

이것은 내가 어떤 사람이 궁금했다 경우이를 추가 할 것입니다 내 현재 CSS

#row { 
    display: table-row; 
    margin: 1%; 
} 

#navbar { 
    width: 250px; 
    position: fixed; 
} 

#navbar ul { 
    font-size: 110%; 
} 

입니다 :

이 탐색 모음에 여러 페이지 중 하나에 대한 patial 코드는 클래스 = "버튼"

li.button { 
    background-color: transparent; 
    padding: 2px 6px 2px 6px; 
    border-radius: 15px; 
    border-top: 3px solid #F2F2F2; 
    border-right: 2px solid #260000; 
    border-bottom: 2px solid #450000; 
    border-left: 3px solid #D1D1D1; 
    margin-bottom: 2px; 
} 

Answer 1

다음 예에서 "navbarwrapper"는 "navbar"를 수직 중심으로 유지합니다 뷰포트의 왼쪽에 에드.

#navbarwrapper 
 
{ 
 
    display: -webkit-flex ; 
 
    display: flex ; 
 
    -webkit-flex-direction: column ; 
 
    flex-direction: column ; 
 
    -webkit-justify-content: center ; 
 
    justify-content: center ; 
 
    position: fixed ; 
 
    top: 0 ; 
 
    left: 0 ; 
 
    height: 100% ; 
 
    z-index: 999999999 ; 
 
} 
 
#navbar 
 
{ 
 
    background-color: #f33 ; 
 
    width: 40px ; 
 
    height: 100px ; 
 
    opacity: 0.8 ; 
 
}

<div id="navbarwrapper"> 
 
    \t <div id="navbar"></div> 
 
</div> 
 

 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P> 
 
<p>sdljdjlj fnfwekjefw efwklefwkwef efwnlewflnnefw</P>

는 나는 그것이 도움이되기를 바랍니다.