Jak wyśrodkować text w divie

pytanie zadane 5 maja 2018 w HTML i CSS przez kubusop Początkujący (420 p.)

Jak wyśrodkować text który jest w divie "nav"?

HTML:

<!DOCTYPE HTML>
<html lang="pl">

<head>
	<meta charset="utf-8"/>
	<title>NAZWA</title>
	<meta name="description" content="Official page"/>
	<meta name="keyword" content="keywords" />
	<meta http-quiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>





<div class="conteiner">
	<div id="logo">LOGO</div>
	<div id="nav">

		<div class="option">Strona główna</div>
		<div class="option">O nas</div>
		<div class="option">Oferta</div>
		<div class="option">Konktak</div>
		<div style="clear:both;"></div>

	</div>
</div>

</body>


</html>

CSS:

body
{
	background-color:#6a6a6a;
	height:100%
}

.conteiner
{
	width:1500px;
	margin-left:auto;
	margin-right:auto;
}

#logo
{
	margin:30px;
	font-size:2em;
	text-align:center;
	font-family: 'Alfa Slab One', cursive;
}

#nav
{
	text-align:center;
	background-color:#444444;
	padding:20px;
	text-align:center;
}

.option
{
	float:left;
	margin-left:40px;
}

2 odpowiedzi

odpowiedź 5 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)

Dla tego diva ustaw:

display: flex;
justify-content: center;

i odpowiednio sobie porób marginy lub paddingi dla poszczególnych elementów aby je ładnie porozsuwać. Ewentualnie masz też inne opcje dla justify-content - poczytaj sobie na: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

komentarz 5 maja 2018 przez kubusop Początkujący (420 p.)

To jak jeszcze mogę wyśrodkować to samo w pionie?

komentarz 5 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)

https://www.w3.org/Style/Examples/007/center.pl.html

tam jest opisanych kilka sposobów.

Można jeśli już mamy flexa, to np. dla tych elementów ustalić align-self: center co środkuje je w tym wypadku w pionie. Wtedy dla całego nav daj jakieś height.