Question

左上角应该有一个图像，顶部中心应该有一个输入框，右上角应该有用户个人资料链接。

班级＆＃34;文本中心＆＃34;不起作用。左右浮动不起作用。文本对齐中心不起作用。必须有一些我缺少的操作顺序，或者一系列容器可以使这更容易。有什么想法吗？

 <nav class="navbar navbar-inverse">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="/crud"><img id="cornerImg" src="/images/beaker.png"></a>
  </div>
  <div class="centerDiv">
  <ul class="nav navbar-nav">
    <li>

      <!-- POST FORM -->
      <form method="post" class="form-inline" id="userCreateForm">
        <div class="form-group">
            <input name="userCreate" type="text" class="form-control" id="userCreateBox" placeholder="Ask your question here!">
            <input name="username" type="text" value="<%= user.username %>" hidden="true">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-default" id="submitButton">Ask</button>
        </div>
      </form>
   </li>
  </ul>
</div>
  <ul class="nav navbar-nav navbar-right">
    <li id="userProfile"><a href="/profile/<%= user.username %>"><%= user.username %></a></li>
  </ul>
</div>

在此编辑中，标题保留，配置文件链接正确，但表单仍未居中。

Answer 1

您可以使用以下CSS将Navbar居中：

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

代码将使所有Navbar元素居中。

如何在引导程序导航栏中居中列表元素？

1 个答案: