Jak wycentrowac liste <li> jako display:block; ?

Question

ul
{
	list-style-type: none;	
	margin: 0px;
	
}

li	
{
	display: block;	
float: left;
padding: 15px;
cursor: pointer;

}

li:hover
{
	background-color: red;
}

 

 

 

Jak wycentrowac to na containerze zeby bylo margin auto left i right. 

Answer 1

Spróbuj:

ul
{
    list-style-type: none;  
    margin: 0 auto;
     
}
 
li  
{
    display: inline-block; 
    padding: 15px;
    cursor: pointer;
 
}
 
li:hover
{
    background-color: red;
}

- Jaki efekt?

 

display: inline-block; działa prawie jak float, tyle że da się wyśrodkować.

Answer 2

Zaznajom się z techniką Flexbox: http://webroad.pl/html5-css3/2466-css3-flexbox-podstawowe-zalozenia - koniec użerania się z pływaniem elementów.

Comments

Nie powiem, ciekawe...

http://the-echoplex.net/flexyboxes/

---

http://flexboxfroggy.com/#pl

Answer 3

margin-left: auto;

margin-right: auto;

w czym problem?

Comments

Nie hula mi to, w tym problem.

---

W stylach:

Do diva z menu dopisz:

Text-align: center;

 

A do ul dopisz:

Display: inline-block;

 

Usuń marginesyauto bo display to załatwi.

Answer 4

Dobra chłopaki i dziewczyny udało się troche metodą prób i błędów ale musialem inline blocka zrobic ustawic kilka innych rzeczy i dopisac pewne sprawy. Dzieki za rady