Question

在我正在重新设计的网页中，我有一个侧面导航栏。当您向下滚动页面时，此栏是固定的并浮动。它是透明的，跟随屏幕，便于导航。它是一个带有id =＆＃34; navbar＆＃34;的nav元素。我需要的是让这个导航栏在所有屏幕上垂直居中。在更高分辨率的屏幕上它很高。在较低分辨率的屏幕上它处于低位。如何在所有屏幕上居中显示此栏？到目前为止，这是我的一大块代码。如有必要，我可以提供更多。

这是带有导航栏的许多页面之一的空间代码：

$('#cardSlots').on('click', '#metroBtn', function(){
    $(this).attr('src','pngs/new_img.png');
}

这是我目前的CSS

<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>

如果有人想知道班级=＆＃34;按钮＆＃34;

，我会添加这个

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

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

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

Answer 1

在下一个例子＆＃34; navbarwrapper＆＃34;保持＆＃34; navbar＆＃34;垂直居中于视口的左侧。

＆＃13;

#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 ;
}

＆＃13;

<div id="navbarwrapper">
 	<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>

＆＃13;

我希望它有所帮助。

垂直固定，居中，导航栏

1 个答案: