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

question-closed Wyśrodkowanie nawigacji w css/html

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,451 wizyt
pytanie zadane 5 listopada 2016 w HTML i CSS przez Derfinorde Nowicjusz (210 p.)
zamknięte 7 listopada 2016 przez Derfinorde

Hej. Mam bardzo banalny, a jednak trudny problem, z którym męczę się już dobrych kilku godzin (pewnie rozwiązanie mam gdzieś pod nosem, ale go nie dostrzegam u_u). Mianowicie, jak wyśrodkować tę o to uroczą nawigację? http://i.imgur.com/Fkwzimn.png


.navi ul, .navi li {
	margin: 0;
	padding: 0;

}
.navi ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.navi li {
	float: left;
	position: relative;
	width: auto;
}
.navi a {
	background: green;
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.navi li:hover a {
	background: #000000;
}
<header>
					Logo i menu główne
										
										<nav class="navi" role="navigation">
  <ul>
    <li><a href="">Strona główna</a></li>
    <li><a href="">Kontakt</a></li>
    <li><a href="#">Artykuły</a>
      <ul id="submenu">
        <li><a href="">Difference between SVG vs. Canvas</a></li>
        <li><a href="">New features in HTML5</a></li>
        <li><a href="">Creating links to sections within a webpage</a></li>
      </ul>
    </li>
    <li><a href="">Newsy</a></li>
    <li><a href="">Info</a></li>
  </ul>
</nav>
</header>
komentarz zamknięcia: rozwiązany
1
komentarz 5 listopada 2016 przez pablop76 VIP (123,540 p.)
Witam. To co widac na screenie to nie to samo co wynika z kodu. Daj caly kod.
1
komentarz 5 listopada 2016 przez pablop76 VIP (123,540 p.)

Daj

.navi{
text-align: center;
}

dalej

.navi ul {
     display: inline-block;
}

usuń z tej klasy width: 100%; Bo jak ma się wycentrować skoro jest na całą szerokość strony ?.

komentarz 5 listopada 2016 przez Derfinorde Nowicjusz (210 p.)
.navi ul, .navi li {
	margin: 0;
	padding: 0;

}
.navi ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.navi li {
	float: left;
	position: relative;
	width: auto;
}
.navi a {
	background: green;
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.navi li:hover a {
	background: #000000;
}
 #submenu {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
}
li:hover ul#submenu {
	opacity: 1;
	top: 40px;
	visibility: visible;
}
#submenu li {
	float: none;
	width: 100%;
}
#submenu a:hover {
	background: #DF4B05;
}
#submenu a {
	background-color:#000000;
}

proszę bardzo. Interesuje mnie tylko jak to wyśrodkować 

komentarz 5 listopada 2016 przez Derfinorde Nowicjusz (210 p.)
O, jest na środku ^^ Dziękuję.
komentarz 5 listopada 2016 przez pablop76 VIP (123,540 p.)
Fajnie. Zamknij temat.

Podobne pytania

0 głosów
3 odpowiedzi 933 wizyt
pytanie zadane 11 listopada 2019 w HTML i CSS przez radzioszq Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 1,100 wizyt
pytanie zadane 24 czerwca 2017 w HTML i CSS przez dziadek Początkujący (440 p.)
0 głosów
3 odpowiedzi 1,151 wizyt
pytanie zadane 16 listopada 2016 w HTML i CSS przez tatar Użytkownik (740 p.)

93,336 zapytań

142,332 odpowiedzi

322,418 komentarzy

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...