如何在导航栏上垂直居中放置菜单项？

Question

我尝试将菜单项“ TEST 1”，“ TEST 2”和“ BRAND”垂直居中，但没有成功。 我试过垂直对齐，顶部和底部的边缘。

我的意思是，我不想将一个放在另一个顶部，而只是将其置于导航栏的顶部和底部之间。

如果有人可以帮助我，我非常感谢。

的HTML

<nav class="navbar navbar-default">
      <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-
    toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a href="index.html" class="navbar-brand">BRAND</a>
   </div>
   <div class="collapse navbar-collapse" id="menu-collapse">
   <ul class="nav navbar-nav navbar-center">
    <li><a id="menu-right" href="#">TEST 1</a></li>
    <li><a id="menu-right" href="#">TEST 2</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><button class="btn btn-primary">Start Now</button></a></li>
    <li><a href="#"><button class="btn btn-primary">Member Login </button></a>
     </li>
     </ul> 
      </div>
     </div>
     </nav>

的CSS

    #menu-right:hover {
        background: #5d5dc9;
        color:#fff;
    }

    #menu-right {
        color:#337ab7;
        text-transform: uppercase;
        vertical-align: middle;
    }

ul {
  vertical-align: middle;
}


    .button-margin {
        border: 1px solid;
    }

    .navbar-brand {
        margin-right: 200px;
    }


    .navbar {
        margin-bottom: 0;
        font-family: 'Raleway', sans-serif;
        font-size: 1.5em;
        font-weight: 800;
        text-transform: uppercase;
    }

这是Codepen网站测试的链接： https ://codepen.io/fdcoder81/pen/Kymyyj

非常感谢你

Answer 1

如果设置了line-height的一个标签来导航栏的高度，它应该对齐垂直居中。

顺便说一句，你们两个：

<a id="menu-right" href="#">

事件应该具有类-您不能为同一ID分配多个元素。

采取

<a class="menu-right" href="#">

并相应地更改您的css

.menu-right

编辑：我玩了您的Codepen的东西-我不知道这是否是使用引导程序时要走的路，但是它可以工作。

您的HTML：

    <html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,800" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="index.html" class="navbar-brand">BRAND</a>
                </div>
                <div class="collapse navbar-collapse" id="menu-collapse">
                    <ul class="nav navbar-nav navbar-center">
                        <li>
                            <a class="menu-right" href="#">TEST 1</a>
                        </li>
                        <li>
                            <a class="menu-right" href="#">TEST 2</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">
                                <button class="btn btn-primary">Start Now</button>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <button class="btn btn-primary">Member Login </button>
                            </a>
                        </li>

                    </ul>
                </div>


            </div>



        </nav>

    </header>

    <!--<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>-->
</body>

</html>

您的CSS：

.menu-right:hover {
    background: #5d5dc9;
    color: white;
}

.menu-right {
    color:#337ab7;
    text-transform: uppercase;
    line-height: 54px;
}
.button-margin {
    border: 1px solid;
}

.navbar > .container-fluid .navbar-brand {
    margin-right: 200px;
    line-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}


.navbar {
    margin-bottom: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    font-weight: 800;
    text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a {
    line-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}

如何在导航栏上垂直居中放置菜单项？

问题描述

1 个解决方案

解决方案1
0 2017-11-12 20:12:45

如何在导航栏上垂直居中放置菜单项？

问题描述

1 个解决方案

解决方案1 0 2017-11-12 20:12:45

解决方案1
0 2017-11-12 20:12:45