Как центрировать элементы навигации?(Ответно)

Question

Перепробовал много вещей, но ничего не получалось.Надеюсь, вы, ребята, можете мне помочь.Моя навигационная панель выглядит так:

    .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>

Я хочу, чтобы элементы li в моем ul были центрированы по центру в середине панели навигации.Не могу найти решение.

Заранее спасибо.

Answer 1

Вам нужно добавить этот css:

#navbarNav{justify-content:center;}

Как бы вы выяснили это для себя?

1. Поймите, что bootstrap предоставляет вам все классы и css, но он предназначен для переопределения при необходимости

2. В браузере Chrome:

   a.Щелкните правой кнопкой мыши по области, которая выглядит неправильно.

   b.Выберите 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>

Answer 2

вам необходимо применить CSS в ul и в li

.navbar-nav{
    float: left;
}
.navbar-nav ul {
    float: left;
}
.navbar-nav ul li{
    float: left;
}