Moving last li element to below the rest inline

Question

I have a list of links that are displayed inline. I want the last li to be positioned centered of the inline list above it. How can I do this with css?

The reason for this is, when the web page is used in mobile it can't fit the entire list, so I want to move it below.

 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Last Item</li>
 </ul>

Answer 1

You can do this by setting text-align:center to both the ul and li element:

ul{
   list-style:none;
   height:100%;
   width:100%;
   padding:0;
   text-align:center;
}

ul li{
   text-align:center;
   display:inline-block;
   width:75px;
   height:20px;
   background:silver;
   border:1px solid black;
   padding:10px;
}

IN ADDITION : Make sure that the ul has a width of 100% and the padding of the ul is set to zero. Also, the li must have a display of inline-block .

Check out the fiddle:

http://jsfiddle.net/rmj7q78t/

Answer 2

This css will do the trick:

ul li {
  display: inline-block;
}

ul li:last-child {
  display: block;
  text-align: center;
}