Css 如何在中心对齐ul标签内容

我一直在尝试使用CSS将

#reference

的

ul

内容对齐到屏幕中央

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

.circlelink{
显示：块；
宽度：100px；
高度：100px；
边界半径：50px；
字体大小：20px；
颜色：#fff；
线高：100px；
文本对齐：居中；
文字装饰：无；
背景：线性梯度（至底部，#719ECE，#719FCE）；
}
.circlelink:悬停{
文字装饰：无；
背景：欧洲经委会；
盒影：0.08像素rgba（0,0,0,8）；
-webkit转换：量表（1.05,1.07）；
-莫兹变换：标度（1.05,1.07）；
}
#提及{
位置：绝对位置；
最高：20%；
宽度：100%；
左边距：自动；
右边距：自动；
}
#参考ul{
明确：两者皆有；
保证金：0；
填充：0；
}
#参考ul li{
显示：块；
位置：相对位置；
浮动：左；
高度：自动；
宽度：200px；
填充：0；
左边距：10px；
列表样式：无；
文本对齐：居中；
空白：nowrap；
}

代码：

你所要做的就是：

添加

文本对齐：居中进入
#参考ul

更改<代码>显示：块进入

显示：内联块在
#参考ul li

移除

浮动：左侧来自
#参考ul li

此外，确保

#参考ul

提供

最小宽度

，为所有圆圈提供所需的宽度，以确保如果浏览器窗口太小，圆圈不会折叠

---

此外，如果从

中删除
宽度
#请参阅ul li

，效果会更好。让内容

指定宽度

这在您的小提琴中对我有用：

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

---

用div包装您的ul会有所帮助

给你看看这个

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

谢谢您的回复，但是内容还没有完全放在中间。此外，它还在网页中使用>100%的宽度。你能找出这个错误吗？删除宽度从#参考ul liGreat答案，我可以使用我的问题，等等！这一次让我很开心！！！我以前有-webkit页边距：1em在rhis css元素，但它不起作用！谢谢

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