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;


comments powered by Disqus