Centering List Items Horizontally

02 Jan 2016

There are two simple ways to center list item horizontally.

display: inline-block & text-align: center

.list-container {
    text-align: center;
    .list-item {
        display: inline-block;
    }
}

It's from here.

width: fit-content & margin: 0 auto;

.list-centered {
    margin: 0 auto;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;

    .list-item {
        float: left;
    }
}

It's from here.

Notice: The width of the clildren can not be percentage;