CSS: align ul li items to center (with margin) without flex model

Question

I have such code:

<ul class="tiles">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

and css:

ul.tiles{
    width: 220px;
    height: 200px;
    list-style-type: none;
    background: #cecece;
    padding: 0;
}

li{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #8ac249;
    text-align: center;
    line-height: 50px;
    margin: 5px;
    float: left;
}

and it look so:

is it real to change it to such model (without flex box):

and how?

Answer 1

Simply add text-align:center to your ul . Text-align center can be useful for a number of situations and can be used for more than just text. It can be used on any inline or inline-block elements and can achieve some neat little things like this.

 ul.tiles{ width: 220px; height: 200px; list-style-type: none; background: #cecece; padding: 0; text-align:center; } li{ display: inline-block; width: 50px; height: 50px; background: #8ac249; text-align: center; line-height: 50px; margin: 5px; } 

 <ul class="tiles"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

Answer 2

ul.tiles{
    width: 220px;
    height: 200px;
    list-style-type: none;
    background: #cecece;
    padding: 0;`enter code here`
    text-align:center;
}

li{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #8ac249;
    text-align: center;
    line-height: 50px;
    margin: 5px;
}

---

put text-align:center; in ul.tiles