Wyśrodkuj elementy w moim responsywnym pasku nawigacyjnym - css, responsive-design, centrowanie, pasek nawigacyjny

Pasek nawigacji włączony moja strona jest wyśrodkowany, ale nie mogę również umieścić w nim elementów, które można wyśrodkować. Czy ktoś może mi pomóc?

Odpowiedzi:

Będziesz musiał je zmienić w swoim css: (Każda skomentowana właściwość powinna zostać usunięta)

.navbar ul {
/* letter-spacing: -0.01em; */
}

.navbar .nav {
border-right: 2px solid black;
/* position: relative; */
/* left: 0; */
display: inline-block;
/* float: left; */
margin: 0;
/* width: 100%; */
/* height: 10px; */
}


.navbar li {
/* width: auto; */
/* display: block; */
display: inline-block;
margin-bottom: 0;
/* line-height: 40px; */
/* font-size: 14px; */
}

.navbar {
text-align: center;
}

I usuń ".divider-vertical" li, nie jest potrzebny, nie dodaje żadnej wartości semantycznej do twojego kodu.

Szybka naprawa:

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

.navbar .nav {
/*float:left;*/
display:inline-block;
vertical-align:top;
}

.nav-collapse {
display:none;
}

.navbar .divider-vertical {
height:42px;
}

Ponieważ Twoja witryna wydaje się być responsywna, możesz chcieć odpowiednio dostosować style, gdy schodzisz do mniejszych rozmiarów ekranu.

Btw, ciekawe nagłówki wiadomości :)