Question

我一直在尝试使用CSS调整屏幕中心#refer的{{1}}内容的内容。

ul

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

代码：jsfiddle

您所要做的就是：

将text-align:center;添加到#refer ul
将display:block;更改为display:inline-block;

#refer ul li

从float:left;

#refer ul li

此外，请确保#refer ul提供min-width为所有圈提供所需的宽度，以确保在浏览器窗口太小时不会折叠。

此外，如果您从width移除#refer ul li，则会更好。让内容<a>指定宽度

Answer 3

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 4

用 div 包装 ul 将有助于

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>

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

4 个答案: