Centering List Items Horizontally

02 Jan 2016

There are two simple ways to center list item horizontally.

  1. display: inline-block & text-align: center

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

    It's from here.

  2. 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;

Follow Me on GitHub

comments powered by Disqus