Comment aligner le contenu de la balise ul dans le centre

J'avais essayé d'aligner le contenu de #refer's ul contenu dans le centre de l'écran à l'aide de 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;
}

Violon

OriginalL'auteur unkn0wn | 2013-04-21

Cela a fonctionné pour moi dans votre violon:

* {
    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);
}

Merci, toutes les solutions de travaux. Ma page est encore en hausse.
Celle-ci a fait ma journée !!! J'ai eu -webkit-marge avant: cadratin (1 em à rhis css de l'élément et il n'a pas de travail! Merci !!!

OriginalL'auteur Jason Lydon

3

code : jsfiddle

Tout ce que vous avez à faire est de :
1. Ajouter text-align:center; en #refer ul
2. Changement display:block; en display:inline-block; dans #refer ul li
3. Supprimer float:left; de #refer ul li
En outre, assurez-vous que le #refer ul fournir min-width qui fournissent la largeur requise pour tous cercle afin de vérifier qu'elle ne s'est effondré si la fenêtre du navigateur trop petit.

En outre, il est préférable si vous retirez le width de votre #refer ul li. Laissez le contenu <a> spécifier la largeur

Super réponse, je peux l'utiliser pour mon problème, et bien plus encore !

OriginalL'auteur AzDesign

Ici, il est

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

}

Merci pour la réponse, Mais encore le contenu n'est pas entièrement le centre. Il est également à l'aide de >100% de la largeur de la page web. Pouvez-vous s'il vous plaît trouver le bug?
supprimer la largeur de #se référer ul li

OriginalL'auteur Rajender Joshi

d'emballage de votre ul avec un div aidera

http://jsfiddle.net/ptMwH/11/ ici cochez cette

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

OriginalL'auteur Wayne Tun

Vous devez vous connecter pour publier un commentaire.