Wiekszy Navbar i sposoby na wysrodkowanie elementow

Question

Witam, stworzylem podstawowego navbara:

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Barber Shop</a>
    </div>
    <ul class="nav navbar-nav navbar-right lista text-center">
      <li class="dupa"><a href="#">Home</a></li>
      <li class="dupa"><a href="#">Page 1</a></li>
      <li class="dupa"><a href="#">Page 2</a></li>
      <li class="dupa"><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

 

I edytowalem go lekko w CSS:

body {
  background-color: black;
}

.navbar {
  height:100px;

}
.dupa {
  margin-top: 20px;
  font-size: 20px;
}
.navbar-brand {
  margin-top:20px;
}

 

Jak widac nie jest co 'cienki pasek' navbaru tylko juz wiekszy 100px. I tutaj mam do was pytanie. Jakie znacie sposoby na wysrodkowanie tego tekstu? Ja skorzystalem ze slabej opcji margina, znacie jakies lepsze? Jesli tak to prosilbym o szczegolowe podzielenie sie.

 

btw.sam probowalem cos z flexboxami itp ale wychodzily mi cuda jakies, navbar sie zmniejszal, itp itd.

Answer 1

Czyli nie rozumiesz do końca flexboxa, bo tak naprawdę to na <ul> wystarczy dodać 2-3 linijki i już są ładnie elementy rozmieszczone ;)

poczytaj sobie

pograj sobie

Według mnie takie rzeczy najłatwiej robić flexboxem;)

Answer 2

Nie uzywaj sztywnego height. Uzyj ul  do zwiekszenia  wysokosci

nav{margin: 20px 0}

 

Comments

I dodaj to do jakiegos codepena. Latwiej do edycji i od razu widac o co chodzi

---

Wywal to ul, niepotrzebnie zwiększa specyficzność. Samo .nav wystarczy.

---

Chcialem mu pokazac ze .nav jest klasa ul, no ale w sumie to wszystko jedno. A z ul naczej na diva sie przerzuci