如何在中心對齊ul標籤內容

我一直在嘗試使用CSS將內容#refer的ul內容對齊屏幕中心。如何在中心對齊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

來源

2013-04-21 unkn0wn

這在你的提琴工作對我來說：

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

來源

2013-04-21 02:17:15

謝謝，所有解決方案的作品。我的網頁再次上架。 – unkn0wn 2013-04-21 02:50:26

這一個讓我的一天！我有** - webkit-margin-before：1em **在rhis css元素上，它不工作！謝謝！！！ – 2015-12-09 11:40:42

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; 

}

來源

2013-04-21 01:44:16

謝謝你的回覆，但內容不是完全居中。它也是在網頁中使用寬度> 100％。你能找到bug嗎？ – unkn0wn 2013-04-21 01:54:34

從#refer ul裏刪除寬度 – 2013-04-21 02:40:21

代碼：jsfiddle

所有你需要做的是：

添加text-align:center;爲#refer ul
變化display:block;到display:inline-block;在#refer ul li
從#refer ul li

刪除float:left;此外，確保#refer ul提供提供所需的寬度都圈min-width，以確保它不是，如果瀏覽器窗口太崩潰了小。

此外，最好是從#refer ul li中刪除width。讓內容<a>指定寬度

來源

2013-04-21 02:11:56 AzDesign

好的答案，我可以用於我的問題，以及更多！ – fermin 2015-08-04 13:34:02

包裹你的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>

來源

2013-04-21 02:24:30

如何在中心對齊ul標籤內容

回答

相關問題