如何将 ul 标签的内容居中对齐

Question

如何将 ul 标签的内容居中对齐

4

我一直在尝试使用CSS将#refer的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;
}

Fiddle

- Mercurial

4个回答

3

代码：jsfiddle

您需要做的是：

在#refer ul中添加text-align:center;
将#refer ul li中的display:block;改为display:inline-block;
从#refer ul li中删除float:left;

此外，确保#refer ul提供min-width以提供所有圆形所需的宽度，以确保如果浏览器窗口太小，它不会折叠。

另外，最好从#refer ul li中删除width。让内容的<a>指定宽度。

- AzDesign

非常好的答案，我可以用来解决我的问题，而且还有更多！ - fermin

0

这里

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

}

- Rajender Joshi

谢谢您的回复，但是内容还没有完全居中。而且它在网页上使用了>100%的宽度。您能否找出这个错误？ - Mercurial

从 #refer ul li 中移除 width。 - Rajender Joshi

0

将您的ul用div包装起来会有所帮助。

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>

- Wayne Tun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Lydon · Accepted Answer

以下内容在您的代码示例中对我有效：

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