• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wiekszy Navbar i sposoby na wysrodkowanie elementow

VPS Starter Arubacloud
0 głosów
469 wizyt
pytanie zadane 21 września 2017 w HTML i CSS przez Apper97 Obywatel (1,380 p.)

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.

2 odpowiedzi

+1 głos
odpowiedź 21 września 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 21 września 2017 przez Apper97
 
Najlepsza

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;)

+1 głos
odpowiedź 21 września 2017 przez Alex.Ironside Stary wyjadacz (14,880 p.)
edycja 22 września 2017 przez Alex.Ironside

Nie uzywaj sztywnego height. Uzyj ul  do zwiekszenia  wysokosci

nav{margin: 20px 0}

 

komentarz 21 września 2017 przez Alex.Ironside Stary wyjadacz (14,880 p.)
I dodaj to do jakiegos codepena. Latwiej do edycji i od razu widac o co chodzi
komentarz 22 września 2017 przez Schizohatter Nałogowiec (39,600 p.)
Wywal to ul, niepotrzebnie zwiększa specyficzność. Samo .nav wystarczy.
komentarz 22 września 2017 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Chcialem mu pokazac ze .nav jest klasa ul, no ale w sumie to wszystko jedno. A z ul naczej na diva sie przerzuci

Podobne pytania

0 głosów
3 odpowiedzi 615 wizyt
pytanie zadane 18 stycznia 2018 w HTML i CSS przez Kacper Mieliński Użytkownik (600 p.)
0 głosów
1 odpowiedź 176 wizyt
pytanie zadane 13 września 2016 w HTML i CSS przez Adam Ostrogórski Obywatel (1,070 p.)
0 głosów
1 odpowiedź 281 wizyt
pytanie zadane 20 maja 2019 w HTML i CSS przez Moras Obywatel (1,620 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...