难以在 Bootstrap 3 Nav 中对齐元素答案

【问题标题】：Stumped on aligning elements within Bootstrap 3 Nav难以在 Bootstrap 3 Nav 中对齐元素
【发布时间】：2017-12-24 02:11:45
【问题描述】：

感谢您查看我的帖子。第一次寻求帮助。

我的问题是，无论我尝试什么，我似乎都无法将导航中的元素居中。

这是我的代码输出的内容。

这就是我想要它做的事情。

所以基本上，我想将内容集中在中间的col-sm-8 和页面右侧的col-sm-2。

这是我的 HTML。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">

<title>Working Title</title>
</head>

<body>

<!-- The Navbar & row-->
<nav class="navbar navbar-inverse row">
    <div class="container-fluid">

        <!-- The logo Img. -->
        <div class="col-sm-2 L-sm-2">
            <div class="navbar-header">
              <a class="navbar-brand" href="#"><img src="Img/logo.jpg" style=""></a>
            </div>
        </div>

        <!-- Begin Page Links. This can change the text size also. -->
        <ul class="nav navbar-nav col-sm-8 PageLinks">

            <!-- Play! -->
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Play! <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">PvE</a></li>
                  <li><a href="#">PvP</a></li>
                </ul>
            </li>

            <!-- About -->
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">The Game</a></li>
                  <li><a href="#">Development</a></li>
                  <li><a href="#">Monster Manual</a></li>
                </ul>
            </li>

            <!-- Forum -->
            <li><a href="#">Forum</a></li>

            <!-- Statistics -->
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Statistics <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">General</a></li>
                  <li><a href="#">PvE</a></li>
                  <li><a href="#">PvP</a></li>
                </ul>
            </li>

            <!-- Armory -->
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Armory <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">PC Armory</a></li>
                  <li><a href="#">PC Builder</a></li>
                </ul>
            </li>               

            <!-- Help! -->
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Help <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">FAQ</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
            </li>               
        </ul>


        <!-- The sign up / sign in stuff. -->
        <div class="nav navbar-nav navbar-right R-sm-2 col-sm-2">
            <ul class="">
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li><br>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            </ul>
        </div>

    </div>
</nav>

这是我的 CSS

* {
/* Makes sure that the padding and border are included in the total width and height of the elements in the Grid. */
box-sizing: border-box;
}

/* Setting the heignt for the logo in the nav bar. */
nav a img {
max-height: 100px;
width: auto;
}

/* Setting the height for the columns in the nav. */
nav .col-sm-2, .col-sm-8{
height: 140px;
}

/* Setting the navbar height & the opacity */
.navbar{
height: 140px;
opacity: .9;
}

/* Setting the left border for the Sign up / Sign in area. */
.R-sm-2{
border-left: 2px solid white;
line-height: 3.3;
}

/* Setting the left border for the Sign up / Sign in area. */
.L-sm-2{
border-right: 2px solid white;
}

.PageLinks{

}

感谢您的帮助！

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。见：How to create a Minimal, Complete, and Verifiable example.

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我会将你的 nav 标签更改为 div 标签，如下所示：

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="@Url.Action("Index", "Home")">

【讨论】：

【解决方案2】：

I found the solution myself using Flexbox. I'm posting it here for anyone who might find this in the future with the same problem.

我所做的只是将它添加到我上面的 CSS 中。

.PageLinks{
/* Makes the text larger */
font-size: 2.7em;
/* Sets the container to flex */
display: flex;
/* Centers the content horizontally */
justify-content: center;
/* Centers the content vertically */
align-items: center;
}

【讨论】：