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

Wyśrodkowanie menu inline-block

VPS Starter Arubacloud
0 głosów
587 wizyt
pytanie zadane 2 stycznia 2019 w HTML i CSS przez Strugaczka Początkujący (260 p.)

Witam,

Tworzę prostą stronę typu "one page". Przy tworzeniu navbara napotkałem problem z jego wyśrodkowaniem. Czy istnieje możliwość wyśrodkowania tekstu ? Próbowałem wszystkie sposoby z position oraz text-align: center. Teraz wygląda to tak jak na obrazku:

A tutaj kod:

HTML:

<body>
	<div class="firstpage">
		<div class="navbar">
			<ol>
				<li><a href="#content">O Nas</a></li>
				<li><a href="#Informations">Oferta</a></li>
				<li><a href="#">Nasze realizacje</a></li>
				<li><a href="#">Galeria</a></li>
				<li><a href="#">Kontakt</a></li>
			</ol>
		</div>	
	</div>
	<div class="content">
	</div>

CSS:

.firstpage
{
    height: 100vh;
    width: auto;
    background-image: url("Grafiki/img3.JPG");
    background-repeat: no-repeat;
    background-size: 100% 100%;

}
.navbar
{
    width: 100%;
    margin-top: 5px;
    padding: 10px 0;
    border-top: 1px solid #751b1b;
}
.content
{
    height: 100vh;
    background-image: url("Grafiki/img2.JPG");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
ol
{
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    display: inline-block;
    text-align: center;
}

ol a
{
    color: #000000;
    text-decoration: none;
    display: block;
    opacity: 50%;
}

ol > li
{
    float: left;
    width: 200px;
    height: 40px;
    margin: 0 10px;
}


ol > li:hover
{
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 20px #ccc;
}

ol > li:hover > a
{
    color: #000000;
    text-decoration: none;
    opacity: 0.5;
}

 

1 odpowiedź

0 głosów
odpowiedź 2 stycznia 2019 przez shotokan Nałogowiec (39,660 p.)
Tekst już masz wyśrodkowany względem wielkości pola <li>. Jeśli chcesz wyśrodkować całe menu to albo elementowi <ol> albo całemu divowi dajesz jakąś określoną szerokość, np. 90% i dodajesz margin-left: auto i margin-right:auto.
komentarz 2 stycznia 2019 przez Strugaczka Początkujący (260 p.)
Dzięki, działa ale to nie do końca dobre rozwiązanie ponieważ chciałbym dodać bootstrapa i navbar zrobić na całą szerokość strony który później będzie się skracał w zależności od rozmiaru ekranu. Teraz jest tak że navbar wypełnia 65% całej szerokości ekranu i w momencie delikatnej zmiany szerokości ostatni element navbara schodzi na dół.
komentarz 2 stycznia 2019 przez shotokan Nałogowiec (39,660 p.)
Zawsze jeśli szerokość rodzica maleje i dzieci się nie mieszczą (bo mają ustawioną szerokość na np. 200px) to przechodzą niżej, taki jest urok zastosowania float.
Jak już chcesz pisać po nowoczesnemu to nie baw się w takie rzeczy tylko używaj flexboxa lub od razu Bootstrapa. No i pamiętaj o RWD :)
komentarz 2 stycznia 2019 przez Strugaczka Początkujący (260 p.)
Czyli normalnie wywalić float i od razu tworzyć to na bootstrapie ? Ale wyświetlanie inline-block musi zostać nie ?
1
komentarz 2 stycznia 2019 przez shotokan Nałogowiec (39,660 p.)
Tak, od razu rób na bootstrapie. Przecież float i inline-block służą do tego samego. Jak będziesz działał na bootstrapie to ani float, ani inline-block nie będą Ci potrzebne.
komentarz 2 stycznia 2019 przez Strugaczka Początkujący (260 p.)

Ok dzięki wielkie za pomoc laugh

Podobne pytania

0 głosów
3 odpowiedzi 395 wizyt
pytanie zadane 2 sierpnia 2020 w HTML i CSS przez niezalogowany
0 głosów
3 odpowiedzi 616 wizyt

92,452 zapytań

141,261 odpowiedzi

319,074 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!

...