Pozycjonowanie div'ów class

pytanie zadane 13 stycznia 2018 w HTML i CSS przez Artur Biały Nowicjusz (120 p.)


	<body>

		<div id="logo">
			Przykładowe LOGO 1
		</div>

		<div id="box">
			
			<div id="menu">

				<div class="option">Strona główna</div>
				<div class="option">Informacje</div>
				<div class="option">Aplikacje</div>
				<div class="option">O projekcie</div>
				<div style="clear: both;"></div>
				
			</div>

		</div>
		
	</body>

#menu
{
	background-color: #70000d;
	height: 50px;
	font-size: 16px;
	font-weight: 900;
	border-bottom: solid;
	border-color: #111111;
}

.option
{
	display: inline-block;
	margin: 0, auto;
	min-width: 50px;
	height: 25px;
	font-size: 18px;
	padding: 10px;
	border: solid 2px #63000b;
}
.option:hover
{
	background-color: #60000d;
}

Witam, mam problem z wyśrodkowaniem "opcji" w menu. Mógłby ktoś wytłumaczyć w jaki sposób mam to zrobić nie zmieniając opcji z div class na li/ul itp.?

1 odpowiedź

odpowiedź 13 stycznia 2018 przez Kamil M Bywalec (2,340 p.)

Najlepiej będzie zrobić to flexem:

#menu{
  display: flex;
  justify-content: center;
}

Jeśli chcesz mieć przerwy pomiędzy poszczególnymi opcjami:

#menu{
  display: flex;
  justify-content: space-around;
}

Polecam zapoznać się z tym narzędziem jak najszybciej. Jest wygodne i często wykorzystywane:

http://kodu.je/flexbox/ - teoria

http://flexboxfroggy.com/#pl - praktyka w fajnym wykonaniu

komentarz 13 stycznia 2018 przez Konrad Fx Mądrala (6,910 p.)

Pamiętaj też że początkujący nie zna flexboxa i nie zadziała jemu to bez ustawienia wielkości w elemencie rodzica. Jest to wymagane ale dzieci mogly miec przeliczany padding i margin w zaleznosci od tego co mówi im rodzic.

Duży plus za podanie linków i chęć pomocy, propsy ;)