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

How to align ul tag content in center

提问by Mercurial

I had been trying to align content of #refer's ulcontent in the center of the screen using CSS.

我一直在努力的对齐内容#refer的ul使用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

小提琴

回答by Jason Lydon

This worked for me in your fiddle:

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

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

回答by AzDesign

code : jsfiddle

代码：jsfiddle

All you have to do is :

您所要做的就是：

1. Add text-align:center;into #refer ul
2. Change display:block;into display:inline-block;in #refer ul li
3. Remove float:left;from #refer ul li

1. 添加text-align:center;到#refer ul
2. 更改display:block;成display:inline-block;在#refer ul li
3. 删除float:left;从#refer ul li

Additionally, make sure the #refer ulprovide min-widththat provide required width for all circle to make sure it's not collapsed if browser window too small.

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

Additionally, it is better if you remove the widthfrom your #refer ul li. Let the content <a>specify the width

此外，最好width从#refer ul li. 让内容<a>指定宽度

回答by Rajender Joshi

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;

}

回答by Wayne Tun

wrapping your ulwith a divwill help

用div包裹你的ul会有所帮助

http://jsfiddle.net/ptMwH/11/here check this

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>