How to align ul tag content in center

Question

I had been trying to align content of #refer's ul content in the center of the screen using CSS.

<div id="refer" style="border:1px solid red">
    <ul>
        <li><a href="#" class="circlelink">One</a>
        </li>
        <li><a href="#" class="circlelink">Two</a>
        </li>
        <li><a href="#" class="circlelink">Three</a>
        </li>
    </ul>
</div>



.circlelink {
    display:block;
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #719ECE, #719FCE);
}

.circlelink:hover {
    text-decoration:none;
    background:#719ECE;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-transform: scale(1.05, 1.07);
    -moz-transform: scale(1.05, 1.07);
}

#refer {
    position:absolute;
    top:20%;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

#refer ul {
    clear:both;
    margin: 0;
    padding: 0;
}

#refer ul li {
    display:block;
    position: relative;
    float: left;
    height: auto;
    width: 200px;
    padding: 0;
    margin-left: 10px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}

Fiddle

Answer 1

This worked for me in your fiddle:

* {
    padding:0;
    margin:0;
}
#refer {
    margin:20% 0 0;
    width:100%;
    /*
    position:absolute;
    top:20%;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    */
}
#refer ul {
    text-align:center;
    /*
    clear:both;
    margin: 0;
    padding: 0;
    */
}
#refer ul li {
    display:inline-block;
    position: relative;
    /* float: left; */
    height: auto;
    width: 100px;
    padding: 0;
    margin:0 50px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
    border:#0f0 solid 1px;
}
.circlelink {
    display:block;
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    line-height:100px;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #719ECE, #719FCE);
}
.circlelink:hover {
    text-decoration:none;
    background:#719ECE;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-transform: scale(1.05, 1.07);
    -moz-transform: scale(1.05, 1.07);
}

Answer 2

code : jsfiddle

All you have to do is :

1. Add text-align:center; into #refer ul
2. Change display:block; into display:inline-block; in #refer ul li
3. Remove float:left; from #refer ul li

Additionally, make sure the #refer ul provide min-width that provide required width for all circle to make sure it's not collapsed if browser window too small.

Additionally, it is better if you remove the width from your #refer ul li. Let the content <a> specify the width