Wyśrodkowanie menu w CSS

pytanie zadane 29 października 2018 w Sieci komputerowe, internet przez razor6017 Użytkownik (780 p.)

Hej!

Zacząłem tworzyć stronę internetową po bardzo długim czasie przerwy. Pierwsze co zrobiłem, to utworzyłem szkielet strony i żeby się potem nie gubić, stworzyłem menu nawigacyjne. Efekt uzyskałem, jaki chciałem. Menu ma kolory jakich pragnąłem, animacji nie chcę - może później sobie "dopracuję" ten aspekt, ale tu pojawia się problem.

Za żadne skarby świata, nie potrafię wyśrodkować tego menu. Nie będę mówić, że "próbowałem wszystkiego", bo to byłoby jawne kłamstwo. Po prostu nie wiem gdzie ręce włożyć albo co robię źle. Poniżej zamieszczam kody HTML i CSS, przed rozpoczęciem "prób" środkowania. Doradzicie jak to zrobić? Byłbym niezmiernie wdzięczny.

Pozdrawiam!

ol {
	list-style-type:none;
	padding:0;
	margin:0;
	font-size:18px;
	height:2em;
	line-height:2em;
	text-align:center;
	color:#FFF;
}

ol > li {
  float:left;
  background-color:#000032;
  width:200px;
  margin-left:1px;
}

ol a {
  display:block;
  color:#FFF;
  text-decoration:none;
  padding:0 5px;
}

ol > li > a:hover {
  color:#09C;
}

ol > li:hover {
  background-color:#EEE;
}

ol > li > ul {
  list-style-type:none;
  padding:0;
  margin:0;
}

ol > li:first-child {
  margin-left:0;
}

ol > li > ul > li > a {
  border-top:1px solid #FFF;
}

ol > li:hover{
  background-color:#FFF;
  color:#09C;
}

ol > li > ul > li {
	position:relative;
	background-color:#BBB;
}

ol > li > ul > li:hover {
  background-color:#AAA;
}

ol > li > ul > li:hover a {
  color:#09C;
}
ol > li > ul {
  display:none;
}

ol > li:hover > ul {
  display:block;
}

<html>
<head>
<meta charset="utf-8">
<title>Nyan Cat</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
	<div>
	<ol>
		<li><a href="./index.html">Strona główna</a>
		</li>
		<li>Dokumenty gildii
			<ul>
			<li><a href="./reg.html">Regulamin gildii</a></li>
			<li><a href="./active.html">Aktywność</a></li>
			<li><a href="./form.html">Deklaracja GW</a></li>
			</ul>
		</li>
		<li><a href="./about_us.html">O nas</a>
		</li>
		<li><a href="./chat.html">Czat dla członków</a>
		</li>
	</ol>
</div>
</body>
</html>

1 odpowiedź

odpowiedź 29 października 2018 przez k.wichura Pasjonat (19,870 p.)
wybrane 7 listopada 2018 przez razor6017

Najlepsza

dodaj do diva klase np. container i wtedy css :

.container {
display:flex;
justify-content:center;
}

komentarz 29 października 2018 przez razor6017 Użytkownik (780 p.)

Podziałało, dziękuję.

Swoją drogą, użyłem bardzo podobnego kodu, ale menu jak zaklęte normalnie, nie reagowało na moje polecenia. Dziękuję jeszcze raz <3