时间戳

首页 > 解决方案 > 如何使导航栏项目居中？（响应地）

html - 如何使导航栏项目居中？（响应地）

问题描述

尝试了很多东西，但没有任何效果。希望你们能帮帮我。我的导航栏如下所示：

    .navbar-nav{
    	float: left;
    	
    }
    
    .navbar img{
    	width: 35px;
    }
    
    #navi{
    	position: fixed;
    	width: 100%;
    	 z-index:1;
    }
    
    .navbar a{
    	font-size: 25px;
    	
    }
    
    .navbar{
    	background-color: #000000;
    }
    
    .halter{
    	padding: 5px;
    }
    
    .navbar-toggler{
    		
    }
    
    .navbar-brand{
    	margin-left: 12px;
    	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
    }
<nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> 
      <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> 
       <a data-scrol class="navbar-brand" href="#text1"> 
       <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span>
       </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li>
          </ul>
        </div>
      </nav>

我希望我的ul中的li元素响应地居中在导航栏的中间。想不出解决办法。

提前致谢。

标签： htmlcssnavbarresponsive

解决方案

你需要添加这个CSS：

#navbarNav{justify-content:center;}

你会如何为自己解决这个问题？

  1. 了解 bootstrap 为您提供所有类和 css，但它被设计为在需要时被覆盖

  2. 在 Chrome 浏览器中：

    一个。右键单击看起来不正确的区域。

    湾。从弹出的上下文菜单中选择 INSPECT

    C。最大化 DevTools 面板。左侧是构成页面的 HTML；右侧是当前在左侧突出显示的元素的 CSS。实验！

/*
  You need this at FULL SCREEN to see the effect (top right link)
  The fix is: .navbar-nav{justify-content:center;}
*/
.navbar-nav{}
.navbar img{width:35px;}
#navi{position:fixed;width:100%;z-index:1;}
.navbar a{font-size:25px;}
.navbar{background-color:#000000;}
.halter{padding:5px;}
.navbar-toggler{}
.navbar-brand{margin-left:12px;font-family:Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";}

/* ADD THIS */
#navbarNav{justify-content:center;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> 
      <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> 
       <a data-scrol class="navbar-brand" href="#text1"> 
       <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span>
       </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li>
          </ul>
        </div>
      </nav>

推荐阅读