HTML/CSS Wyśrodkowanie elementu.

Question

Witam wszystkich forumowiczów!

Od niedawna zacząłem uczyć się HTMLa oraz CSSa, bo sprawia mi to naprawdę frajdę :)

Niestety mam problem w swoim projekcie szablonu. Z tego co wiem to wyśrodkowanie elementów to temat rzeka i na pewno rozwiązań jest masa, ale Ja próbowałem już wielu i żadne nie działa. Próbuję namierzyć gdzie popełniłem błąd i zwracam się do Was z ogromną prośbą o pomoc. Chciałbym wyśrodkować pasek menu względem szerokości strony tj. 1140px. Niestety cały czas z lewej strony mam mniejszą odległość od bordera niż z prawej - czyli dalej nie jest idealnie na środku.

Tak wygląda struktura elementów w html:

<div id="wrapper">
	<div class="header">
		<div class="nav">
			<ul class="menu">
					<li class="menu1" style="background-color: #E70000;">Menu</li>
					<li class="menu1" style="background-color: #FF8C00;">Menu</li>
					<li class="menu1" style="background-color: #FFEF00;">Menu</li>
					<li class="menu1" style="background-color: #00811F;">Menu</li>
					<li class="menu1" style="background-color: #0044FF;">Menu</li>
					<li class="menu1" style="background-color: #760089;">Menu</li>

Tak wygląda CSS:

.nav
{
	font-size: 35px; 
	color: black;
        border: 1px dotted red;
        display: flex;
        align-items: center;
 }

.menu 
{
	list-style-type: none;
	text-align: center;
        position: absolute:
}


.menu > li
{
	letter-spacing: 2px;
	width: 155px;
	background-color: black;
	height: 45px;
	margin-right: 15px;
    -webkit-box-shadow: 0px 10px 12px -3px #000000; 
	box-shadow: 0px 10px 12px -3px #000000;
    display: inline-block;
}

Dziękuję za ewentualną pomoc i przyjmę na klatę krytykę, ale amatorszczyzna rządzi się swoimi prawami :P

Pozdrawiam i miłego wieczorku!

Answer 1

Możesz wyzerować sobie domyślne marginesy nadawane przez przeglądarkę:

* {
    margin: 0;
    padding: 0;
}

zastosować w .nav zamiast align-items: center (wyrównanie w pionie)  justify-content: center (wyrównanie w poziomie)

justify-content: center;

wyzerować prawy margines dla ostatniego elementu menu

li:last-child {
    margin-right:0;
}

 

Answer 2

Ja ucząc się html, nauczyłem się, że bardzo często rozwiązanie naszych problemów, jest banalne proste, jak ci podam rozwiązanie, to się wkurzysz.

dopisz do ".menu"  margin-left:auto; margin-right:auto;, i usunąłem position:absolute;

.menu 
{
	margin-left:auto;
	margin-right:auto;
    list-style-type: none;
    text-align: center;
}

Nie irytuj się, i powodzenia życzę oraz zimnej krwi :-)

Comments

Dziękuje za słowa otuchy, nie poddaję się, ale mam chwilę gdzie brak cierpliwości.

Jeśli chodzi o Twój pomysł na to rozwiązanie to według mnie nie działa. Pasek .menu dalej nie jest idealnie wyśrodkowany - tylko przesunięty do prawej strony. Tak jakby był jeszcze z lewej strony jakiś margines. W body margines i pading na zero.

body 
{
		margin: 0;
		padding: 0;
		font-family: 'Lobster', cursive;
		background-image:  url("img/teczabkg.jpg");
		
}

No nic, muszę od nowa zacząć przeglądać kursy tworzenia i przemieszczania elementów, bo dalej brakuję mi tu wiedzy.

---

Wydawało mi się, że jest na środku, przyjrzę się temu jeszcze.

A coś takiego odpowiadałoby ci?.

Głownie wymieniłem elementy listy na divy.

A oto kod: HTML:

<div id="wrapper">
    <header>
        <div class="nav">
			<div class="menu1" style="background-color: #E70000;">Menu</div>
			<div class="menu1" style="background-color: #FF8C00;">Menu</div>
			<div class="menu1" style="background-color: #FFEF00;">Menu</div>
			<div class="menu1" style="background-color: #00811F;">Menu</div>
			<div class="menu1" style="background-color: #0044FF;">Menu</div>
			<div class="menu1" style="background-color: #760089;">Menu</div>
		</div>
	</header>
</div>

a tu CSS:

body
{
	margin-left:1%;
	margin-right:1%;
}
#wrapper{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.nav
{
    font-size: 35px; 
    color: black;
    border: 1px dotted red;
}
 
.menu 
{
    text-align: center;
}
 
 
.menu1
{
    background-color: black;
    height: 45px;
    -webkit-box-shadow: 0px 10px 12px -3px #000000; 
    box-shadow: 0px 10px 12px -3px #000000;
    display: inline-block;
}

P.S. nie przejmuj się, że w adresie jest xampp, serwer php jest wyłączony, to po prostu mój domyślny, folder na projekty.

Answer 3

Zanim zaczniesz cokolwiek poprawiać, możesz (roboczo) dopisać dla .menu właściwość " outline:5px dotted red; ".

Będziesz widzieć co się dzieje podczas nanoszenia poprawek.

A teraz poprawki:

linia " position:absolute " zakończona jest dwukropkiem zamiast średnikiem.

Możesz ją całkiem usunąć, ponieważ jest całkowicie zbędna, albo docelowo poprawić ale teraz usuń.

Usuń " margin-right: 15px; " (bo nie tędy droga) albo dopisz " margin-left: 15px; ".

Oczywiście dobierz sobie wartości wg potrzeby.

Dla .nav dopisz właściwość " justify-content: center; ".

Dla .menu dodaj właściwość " padding:0; " - to tu jest główny problem.

Powinno pomóc - u mnie jest OK.

Jeśli jednak chcesz przywrócić usuniętą wcześniej właściwość " position:absolute; " (ja bym tego nie robił),

to przywróć oraz dopisz dla .menu właściwości " top:0; right:0; left:0; ".

Następnie musisz rodzicowi dodać właściwość " position:relative; " albo innemu przodkowi. Jeśli tego nie zrobisz, twój element o klasie .menu pozycjonuje się względem <body>. Potem czeka cię zabawa z "z-index" oraz "problem" z tym, że twoje <ul class="menu"> zasłania widok na inne elementy, które zapewne dopiszesz do strony.

pozdrawiam