Wyśrodkowanie menu inline-block

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ź

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.