Align float center

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;
}
<ul id="test">
  <li>red</li>
  <li>yellow</li>
  <li>white</li>
  <li>blue</li>
  <li>black</li>
</ui>

Posted in CSS


Categories

Archives