Przyciski w menu

Question

Witam, mam pytanie jak wyśrodkować przyciski w menu

https://zapodaj.net/0e10e0d7c0f8e.jpg.html

 

<center> 
 <div id="menu">
			<div class="option"><a href="index.html">Home</a></div>
			<div class="option"><a href="index.html">SMS</a></div>
			<div class="option"><a href="index.html">Mapy</a></div>
	        <div class="option"><a href="index.html">Gry</a></div>
			<div class="option"><a href="index.html">Dodatki na bloga</a></div>
		    <div class="option"><a href="index.html">Newsy</a></div>
            <div class="option"><a href="index.html">Sport</a></div>		
		    <div class="option"><a href="index.html">Sport</a></div>
		    <div class="option"><a href="index.html">Pogoda</a></div>
		   <div class="option"><a href="index.html">Więcej</a></div>
		</div>
	 </center> 	

	
	#menu
{
	background-color: #00B3FF;
	width: 1000px;
	height: 40px;
	padding:20px;
	text-align: center;
	font-size: 18px;
	align: center
	
}






.option
{

	font-size:18px;
	height:15px;
	padding: 10px;
	border: 2px dotted #444444;
    float: left;
	}

.option:hover
{
	background-color: #f36742;
	color: white;
	cursor: pointer;
}

 

Comments

Po co powielasz pytanie?

Answer 1

Ja bym poradził żeby to menu zrobić tak jak powinno być, czyli na liście ul. Wtedy wystarczy elementom menu (<li>) nadać display: inline-block i wszystko bez problemu się wyśrodkuje przez text-align: center.

Przykład: http://codepen.io/awaluk/pen/QNvayg

Co do kodu który podałeś to żadne text-align tu nie pomoże bo wewnątrz menu masz divy czyli elementy blokowe.

PS. <center>

Answer 2

text-align: center w #menu.

Comments

jest już to napisane,a przyciski nie są wyśrodkowane

Answer 3

do #menu dodaj

margin-left: auto;
margin-right: auto;

 

Answer 4

Obejrzyj kurs Pana Mirosława tutaj, on pokazuje jak zrobić to za pomocą list. Przy okazji nauczysz się jak prawidłowo robić menu.

Answer 5

Jeden. <center> A co to, kto to?  ...od dawna nie aktualne.

Dwa. Menu robi się za pomocą listy, <li>. → link

Trzy. Każdy link czyli <a> powinien zawierać title

Answer 6

Prosta sprawa:

zamiast float: left; w .option dajesz display: inline-block; a w #menu dajesz text-align: center;

Comments

Albo "opakowujesz" divy z .option w diva np. #op gdzie dajesz właściwość: display: inline-block; i musi być oczywiście w #menu właściwość text-align: center; tyle :)

<div id="menu">
<div id="op">
            <div class="option"><a href="index.html">Home</a></div>
            <div class="option"><a href="index.html">SMS</a></div>
            <div class="option"><a href="index.html">Mapy</a></div>
            <div class="option"><a href="index.html">Gry</a></div>
            <div class="option"><a href="index.html">Dodatki na bloga</a></div>
            <div class="option"><a href="index.html">Newsy</a></div>
            <div class="option"><a href="index.html">Sport</a></div>        
            <div class="option"><a href="index.html">Sport</a></div>
            <div class="option"><a href="index.html">Pogoda</a></div>
           <div class="option"><a href="index.html">Więcej</a></div>
        </div>   
</div>

#op
{
display: inline-block;
}