在屏幕尺寸减小并按下按钮后居中对齐导航栏答案

【问题标题】：Center Align the navbar after screen size is reduced and on button pressed在屏幕尺寸减小并按下按钮后居中对齐导航栏
【发布时间】：2016-12-13 08:13:43
【问题描述】：

我是 HTML/CSS 的新手，我正在创建一个顶部带有响应式导航栏的网页。我面临的问题是，当navbar 折叠并按下按钮时，navbar-items 与打开的导航菜单的左侧对齐。我希望将项目对齐到菜单的中心。我在SO 和W3schools 上搜索了很多，但我找不到我的问题的解决方案。

这是我正在使用的 HTML 代码：

<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="CSS/stylesheet.css">
  <title>
    My Personal Portfolio
  </title>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><strong>Vatsal Sura</strong></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav nav-pills navbar-nav navbar-right">
          <li class="nav-item active"><a class="nav-link" href="#">ABOUT</a></li>
          <li class="nav-item "><a class="nav-link" href="#">MY PORTFOLIO</a></li>
          <li class="nav-item"><a class="nav-link" href="#">CONTACT ME</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

这是网页首次在大屏幕上加载时的图像：

这是浏览器最小化和导航栏折叠时的另一张图片：

单击按钮时，导航栏会在原始导航栏下方打开，并且项目与左侧对齐，但我希望它们与导航栏的中心对齐。

P.S.：这里我希望nav-items 在未折叠时首先右对齐，但我希望它们在折叠时居中对齐。任何帮助，将不胜感激。谢谢。

【问题讨论】：

从您的代码中我看到您所需要的只是 text-align: center;在媒体查询中。什么不起作用？
检查哪些类被应用到折叠的项目，并为应用的附加类设置text-align : center;
@MadalinaTaina 我怎样才能做到这一点？我对此真的很陌生，所以我不知道该怎么做。你能告诉我怎么做吗？
@VatsalSura css-tricks.com/centering-css-complete-guide

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

【解决方案1】：

如果你想让你的网站完全响应，那么你应该为不同的屏幕尺寸编写不同的 css 规则...

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {
/* Styles */
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* Desktops and laptops ----------- */

@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

更多信息请参考这个问题：CSS media queries for screen sizes

【讨论】：

【解决方案2】：

您可以尝试添加以下 CSS：

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

.in 类在取消折叠导航时由引导程序添加。另外，请确保li 显示为inline 或inline-block。

编辑 1：我猜是因为ul 中的navbar-right 类

.navbar-collapse.collapse.in ul.nav{ 
  text-align: center !important; // Try to remove the important part.
}

您是否也可以检查开发人员工具以检查类是否正确以及样式是否被覆盖？

编辑 2：

将此添加到您的 CSS 中：

.navbar-collapse.collapse.in ul{
  text-align: center;
  vertical-align: middle;
}
.nav-pills>li {
  float: none;
  display: inline-block;
}

【讨论】：

你会拉小提琴吗？
是的，谢谢。但是当我们点击按钮时，是否有可能没有发生转换。因为它首先显示在左侧然后来到中心。
我发现并更新了您的答案。谢谢。