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

Lista nie wyśrodkowuje się w DIVIE

Object Storage Arubacloud
0 głosów
243 wizyt
pytanie zadane 8 stycznia 2020 w HTML i CSS przez FilOON Użytkownik (680 p.)

Witam. 

Menu stworzone za pomocą listy, nie chce się dać wyśrodkować za pomocą position: relative; left: 50%, co jest?

Czy takie rozwiązanie dla wyśrodkowania takiego menu jest dobre? A może należy użyć innego sposobu?

Tak to wygląda:

<div id="navigation"> 
		
		<ul>
			<li><a href="index.html">O szkole</a></li>
			<li><a href="index.html">Kontakt</a></li>
			<li><a href="index.html">Pracownicy</a></li>
			<li><a href="index.html">Galeria</a></li>
		</ul>
		
	</div>
#navigation
{
	width: 100%;
	height: 50px;
	padding: 0;
	background-color: #64B5F6;
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
}

ul
{
	display: block;
	list-style: none;
	margin: auto;
	padding: 0;
	line-height: 30px;
	text-align: center;
	position: relative;
	left: 50%;
}

ul li
{
	float: left;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	text-align: center;
	color: white;
	padding: 10px;
	font-size: 18px;
	font-family: Arial;
	font-weight: 500;
	letter-spacing: 2px;
}

ul a:hover
{
	background-color: #53A5E5;
}

 

3 odpowiedzi

+2 głosów
odpowiedź 9 stycznia 2020 przez pablop76 VIP (123,180 p.)
wybrane 9 stycznia 2020 przez FilOON
 
Najlepsza

Nie ma sensu używać w nawigacji  float skoro mamy flexbox Dodaj klasę do ul i nadaj jej 

display: flex;
justify-content: center;

 

+1 głos
odpowiedź 8 stycznia 2020 przez Chess Szeryf (76,710 p.)

Rozwiązanie znalazłem na codepen.io, przeczytaj również kod na w3.org.

Zmień swoje fragmenty kodu na te poniżej.

ul
{
    display: block;
    list-style: none;
    margin: auto;
    padding: 0;
    line-height: 30px;
    text-align: center;
    position: relative;
    float: right;
    left: -50%;
}
 
ul li
{
    float: left;
    position: relative;
    left: 50%;
}
+1 głos
odpowiedź 9 stycznia 2020 przez adam_jankowski Mądrala (5,970 p.)
Wysrodkuj za pomocą text-align: center;

Podobne pytania

0 głosów
1 odpowiedź 935 wizyt
pytanie zadane 10 września 2016 w JavaScript przez Adecristo Początkujący (460 p.)
0 głosów
1 odpowiedź 195 wizyt
pytanie zadane 30 kwietnia 2017 w HTML i CSS przez czmyk Obywatel (1,100 p.)
0 głosów
2 odpowiedzi 220 wizyt
pytanie zadane 29 marca 2018 w HTML i CSS przez Leho99 Nowicjusz (200 p.)

92,684 zapytań

141,589 odpowiedzi

320,073 komentarzy

62,044 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

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!

...