堆棧內存溢出
  簡體   English   中英

導航欄菜單按鈕不垂直移動居中

[英]Navbar Menu Button not Moving Vertically Center

 原文  2019-06-27 21:44:24  4   1    html/ css/ twitter-bootstrap/ bootstrap-4/ flexbox

問題描述

所以我想讓我的導航菜單欄位於導航欄的中心，在所有其他屏幕尺寸中，它正是我想要的位置，除了中等。 它只是停留在右下角，我不知道如何將它移動到導航欄的右中部分。 我已經嘗試了所有我能想到的東西，比如邊距和填充、彈性對齊，但我似乎無法弄清楚。 請幫忙！

'''
<!--HTML-->
            <nav id='header-nav' class='navbar navbar-expand-lg navbar-dark bg-dark'>
                <div class='container-fluid mx-auto'>
                    <div class='navbar-brand'>
                        <a href="index.html">
                            <div class='d-none d-md-block' id='logo' alt='piano logo'></div>
                        </a>
                            <h1><a href='index.html' id='header1' class='d-flex text-light'>Sandra's Studio</a></h1>
                                <h2 id='header2' class='d-flex text-info'>Cumming, GA</h2>
                            </div>
                                    <!--Menu Button-->
                                    <button id='menuButton' class="d-flex ml-auto d-block d-lg-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
                                    <div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
                                        <ul id='nav nav-tabs' class='navbar-nav'>
                                            <!--Home Button-->
                                            <li class='nav-item d-block d-lg-none text-center text-lg-right'>
                                                <a class='nav-link active' id='home' href='index.html'>home</a>
                                            </li>
                                            <!--New Students Button-->
                                            <li class='nav-item text-center text-lg-right'>
                                                <a class='nav-link' id='lessons' href='html/new-students.html'>looking for lessons</a>
                                            </li>
                                            <!--Previous Students Button-->
                                            <li class='nav-item text-center text-lg-right'>
                                                <a class='nav-link' id='existing' href='html/existing-students.html'>already a student</a>
                                            </li>
                                            <!--Info Dropdown-->
                                            <li class='nav-item dropdown'>
                                                <a class="nav-link dropdown-toggle text-center text-lg-right" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Info</a>
                                                <div class='dropdown-menu bg-info'>
                                                    <a class='dropdown-item text-center' href='#testimonials'>testimonials</a>
                                                    <a class='dropdown-item text-center' href='#schedule'>schedule</a>
                                                    <a class='dropdown-item text-center' href='#address'>address</a>
                                                </div>
                                            </ul>
                                        </div>
                                </div>
                            </div>
                        </nav>
                    </header>
'''


    '''
       * {
    box-sizing: border-box;
    text-decoration: none;
}
body {
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
}

/*Navbar*/
#header-nav {
    width: 100%;
}

div.navbar-header {
    padding-bottom: 0;
}

#logo {
    background: url('../images/piano.png') no-repeat;
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 20px 0 0;
}

.navbar-brand {
    margin: 0;
    padding-top: 15px;
    height: auto;
    width: auto;
    text-align: center;
}
.navbar-brand #header1 {
    text-transform: uppercase;
    font-family: bebas-neue, sans-serif;
    text-shadow: 1px 1px 1px #222;
    line-height: .75;
    margin: 0;
    padding: 0;
}
.navbar-brand #header2 {
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

 a:hover,.navbar-brand a:focus {
    color: #FDECEF;
    text-decoration: none;
}

#header1 {
    color: #FDECEF;
}

/*Menu Buttons*/
.navbar-toggler-icon {
    color: #FFF;
}

#nav-list {
    margin-top: 10px;
}

#nav-list a {
    color: #F2F3F4;
    text-align: center;
}

.nav-link {
    text-transform: uppercase;
}

.dropdown-menu {
    text-transform: uppercase;
    border-radius: 8px;
}

/*Responsive Framework*/

/*Extra Large Devices*/
@media (min-width: 1200px) {

    .navbar-brand #header1 {
        font-size: 2em;
    }

    .navbar-brand #header2 {
        font-size: 1.5em;
    }

    #navbarSupportedContent {
        margin-right: 75px;
    }
}

/*Large Devices*/
@media (min-width: 992px) and (max-width: 1199.98px) {

    #logo {
        background: url('../images/piano-medium.png') no-repeat;
        width: 150px;
        height: 150px;
    }

    .navbar-brand #header1 {
        font-size: 1.75em;
    }

    .navbar-brand #header2 {
        font-size: 1.25em;
    }

    #navbarSupportedContent {
        margin-right: 75px;
    }
}

/*Medium Devices*/
@media (min-width: 768px) and (max-width: 991.98px) {

    #logo {
        background: url('../images/piano-medium.png') no-repeat;
        width: 150px;
        height: 150px;
    }

    .navbar-brand {
        width: 100%;
    }

    .navbar-brand #header1 {
        margin: 0 0 0 10px;
        font-size: 1.5em;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 1em;
    }

    .nav-item {
        font-size: 2em;
    }

    .dropdown-item {
        font-size: 1.5em;
    }
}

/*Small Devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .navbar-brand #header1 {
        margin: 0;
        font-size: 1.5em;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 1em;
    }
}

/*Extra Small Devices*/
@media (max-width: 575.98px) {

    .navbar-brand #header1 {
        margin: 0;
        font-size: 10vw;
    }

    .navbar-brand #header2 {
        margin: 10px 0 0 10px;
        font-size: 3.5vw;
    }
}

/*Extremely Small Devices*/
@media (max-width: 400px) {
    .navbar-brand #header1 {
        font-size: 8vw;
    }

    .navbar-brand a {
        font-size: 5vw;
    }
}
'''

1 個解決方案

解決方案1
 0  2019-06-29 10:26:28

當您更改屏幕尺寸同時保持移動尺寸時，您的漢堡菜單會從右側的垂直居中跳轉到右側的垂直底部；

以下代碼將幫助您獲得與您在問題中要求的中等尺寸相同的體驗；

@media (max-width: 991.98px) and (min-width: 768px){
.navbar-brand {
    max-height: 99px;
    width: 100%;
}
}

完整的工作片段如下： 

 * { box-sizing: border-box; text-decoration: none; } body { font-size: 16px; font-family: "Montserrat", sans-serif; } /*Navbar*/ #header-nav { width: 100%; } div.navbar-header { padding-bottom: 0; } #logo { background: url('../images/piano.png') no-repeat; float: left; width: 200px; height: 200px; margin: 0 20px 0 0; } .navbar-brand { margin: 0; padding-top: 15px; height: auto; width: auto; text-align: center; } .navbar-brand #header1 { text-transform: uppercase; font-family: bebas-neue, sans-serif; text-shadow: 1px 1px 1px #222; line-height: .75; margin: 0; padding: 0; } .navbar-brand #header2 { text-transform: uppercase; margin: 0; padding: 0; font-weight: 600; } a:hover, .navbar-brand a:focus { color: #FDECEF; text-decoration: none; } #header1 { color: #FDECEF; } /*Menu Buttons*/ .navbar-toggler-icon { color: #FFF; } #nav-list { margin-top: 10px; } #nav-list a { color: #F2F3F4; text-align: center; } .nav-link { text-transform: uppercase; } .dropdown-menu { text-transform: uppercase; border-radius: 8px; } /*Responsive Framework*/ /*Extra Large Devices*/ @media (min-width: 1200px) { .navbar-brand #header1 { font-size: 2em; } .navbar-brand #header2 { font-size: 1.5em; } #navbarSupportedContent { margin-right: 75px; } } /*Large Devices*/ @media (min-width: 992px) and (max-width: 1199.98px) { #logo { background: url('../images/piano-medium.png') no-repeat; width: 150px; height: 150px; } .navbar-brand #header1 { font-size: 1.75em; } .navbar-brand #header2 { font-size: 1.25em; } #navbarSupportedContent { margin-right: 75px; } } /*Medium Devices*/ @media (min-width: 768px) and (max-width: 991.98px) { #logo { background: url('../images/piano-medium.png') no-repeat; width: 150px; height: 150px; } .navbar-brand { max-height: 99px; width: auto; } .navbar-brand #header1 { margin: 0 0 0 10px; font-size: 1.5em; } .navbar-brand #header2 { margin: 10px 0 0 10px; font-size: 1em; } .nav-item { font-size: 2em; } .dropdown-item { font-size: 1.5em; } } /*Small Devices*/ @media (min-width: 576px) and (max-width: 767.98px) { .navbar-brand #header1 { margin: 0; font-size: 1.5em; } .navbar-brand #header2 { margin: 10px 0 0 10px; font-size: 1em; } } /*Extra Small Devices*/ @media (max-width: 575.98px) { .navbar-brand #header1 { margin: 0; font-size: 10vw; } .navbar-brand #header2 { margin: 10px 0 0 10px; font-size: 3.5vw; } } /*Extremely Small Devices*/ @media (max-width: 400px) { .navbar-brand #header1 { font-size: 8vw; } .navbar-brand a { font-size: 5vw; } }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <nav id='header-nav' class='navbar navbar-expand-lg navbar-dark bg-dark'> <div class='container-fluid mx-auto'> <div class='navbar-brand'> <a href="index.html"> <div class='d-none d-md-block' id='logo' alt='piano logo'></div> </a> <h1><a href='index.html' id='header1' class='d-flex text-light'>Sandra's Studio</a></h1> <h2 id='header2' class='d-flex text-info'>Cumming, GA</h2> </div> <!--Menu Button--> <button id='menuButton' class="d-flex ml-auto d-block d-lg-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'> <ul id='nav nav-tabs' class='navbar-nav'> <!--Home Button--> <li class='nav-item d-block d-lg-none text-center text-lg-right'> <a class='nav-link active' id='home' href='index.html'>home</a> </li> <!--New Students Button--> <li class='nav-item text-center text-lg-right'> <a class='nav-link' id='lessons' href='html/new-students.html'>looking for lessons</a> </li> <!--Previous Students Button--> <li class='nav-item text-center text-lg-right'> <a class='nav-link' id='existing' href='html/existing-students.html'>already a student</a> </li> <!--Info Dropdown--> <li class='nav-item dropdown'> <a class="nav-link dropdown-toggle text-center text-lg-right" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Info</a> <div class='dropdown-menu bg-info'> <a class='dropdown-item text-center' href='#testimonials'>testimonials</a> <a class='dropdown-item text-center' href='#schedule'>schedule</a> <a class='dropdown-item text-center' href='#address'>address</a> </div> </ul> </div> </div> </div> </nav>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在導航欄中垂直居中下拉菜單 bootstrap navbar center垂直水平？ 如何水平和垂直居中導航欄？ 當我縮小瀏覽器時，我的菜單按鈕垂直向上移動 如何在菜單中垂直居中登錄按鈕 引導欄菜單上僅將特定文本/按鈕居中 將按鈕垂直和水平居中 導航欄中的中心鏈接和按鈕 中心在<li>菜單中垂直鏈接 Flexbox將項目垂直對齊到導航欄的中心
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM