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

Przyciski w menu

Aruba Cloud - Virtual Private Server VPS
0 głosów
388 wizyt
pytanie zadane 9 lipca 2016 w HTML i CSS przez Kamil Czech Dyskutant (7,700 p.)

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;
}

 

komentarz 9 lipca 2016 przez Pietrak Pasjonat (18,850 p.)
Po co powielasz pytanie?

6 odpowiedzi

+2 głosów
odpowiedź 9 lipca 2016 przez Arkadiusz Waluk Ekspert (290,050 p.)
wybrane 11 sierpnia 2016 przez Kamil Czech
 
Najlepsza

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>

0 głosów
odpowiedź 9 lipca 2016 przez kubaapk Nałogowiec (44,270 p.)
text-align: center w #menu.
komentarz 9 lipca 2016 przez Kamil Czech Dyskutant (7,700 p.)
jest już to napisane,a przyciski nie są wyśrodkowane
0 głosów
odpowiedź 9 lipca 2016 przez ormu16 Gaduła (4,980 p.)

do #menu dodaj

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

 

0 głosów
odpowiedź 9 lipca 2016 przez obl Maniak (51,300 p.)

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

0 głosów
odpowiedź 9 lipca 2016 przez Eimens Maniak (69,240 p.)

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

0 głosów
odpowiedź 9 listopada 2016 przez Marecki Obywatel (1,690 p.)
Prosta sprawa:

zamiast float: left; w .option dajesz display: inline-block; a w #menu dajesz text-align: center;
komentarz 9 listopada 2016 przez Marecki Obywatel (1,690 p.)

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;
}

 

Podobne pytania

+1 głos
2 odpowiedzi 172 wizyt
pytanie zadane 28 października 2016 w C i C++ przez chacken Użytkownik (820 p.)
+1 głos
2 odpowiedzi 448 wizyt
pytanie zadane 1 lutego 2021 w HTML i CSS przez Heoth Początkujący (300 p.)
0 głosów
1 odpowiedź 299 wizyt
pytanie zadane 16 lipca 2016 w C i C++ przez strawberry Nowicjusz (140 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 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!

...