Как выровнять содержимое тега ul в центре

Question

Я пытался выровнять содержимое #referul в центре экрана с помощью 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

Это работало для меня в своей скрипкой:

* { 
    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

Here it is

.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; 
    text-align:center; 
} 

#refer ul { 

    clear:both; 

    margin: 0; 

    padding: 0; 

} 

#refer ul li { 

    display:inline-block; 

    position: relative; 

    height: auto; 

    width: 200px; 

    padding: 0; 

    margin-left: 10px; 

    list-style: none; 

    text-align: center; 

    white-space: nowrap; 

} 

Answer 3

код: jsfiddle

Все, что вам нужно сделать, это:

1. Добавить text-align:center; в #refer ul
2. Изменение display:block; в display:inline-block; в #refer ul li
3. Удалить float:left; из #refer ul li

Кроме того, убедитесь, что #refer ul обеспечивают min-width, которые обеспечивают требуемую ширину для всей окружности, чтобы убедиться, что он не развалился, если окно браузера слишком маленький.

Кроме того, лучше удалить width с #refer ul li. Пусть содержание <a> указать ширину

Answer 4

оборачивать ваш ул с сНу поможет

http://jsfiddle.net/ptMwH/11/ здесь проверить эту

<div id="refer" style="border:1px solid red"> 
    <div class="wrapper"> 
    <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> 
</div>