如何在导航栏上垂直居中菜单项？答案

【问题标题】：How to center vertically menu items on nav bar?如何在导航栏上垂直居中菜单项？
【发布时间】：2017-11-13 19:54:17
【问题描述】：

我尝试垂直居中菜单项“TEST 1”、“TEST 2”和“BRAND”但没有成功。我试过vertical-align，margin-top和bottom。

我的意思是，我不想把一个放在另一个上面，只是放在导航栏顶部和底部边距之间的中心。

如果有人可以帮助我，我真的很感激。

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

非常感谢

【问题讨论】：

避免重复提问。您可以简单地参考这个答案，stackoverflow.com/questions/79461/…
Vertical alignment of elements in a div的可能重复

标签： html css twitter-bootstrap-3

【解决方案1】：

如果您将 a 标签的 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;
}

【讨论】：

如果我使用 class 而不是 id，它不起作用....颜色和背景也不会改变。