beomil ideas

Sometimes float-left or float-right cannot make a center align and we can use a margin with Width but there is a simple way as below. #test { float: right; position: relative; left: -50%; }   #test li { float: left; position: relative; left: 50%; border: 1px solid red; }#test { float: right; position: relative; left: -50%; } #test li { float: left; position: relative; left: 50%; border: 1px solid red; } <ul id="test"> <li>red</li> <li>yellow</li> <li>white</li> <li>blue</li> <li>black</li> </ui><ul id="test"> <li>red</li> <li>yellow</li> <li>white</li> <li>blue</li> <li>black</li> </ui>