如何將列表居中

Question

我有一個包含一些li元素的ul列表，然后將它們浮動到左邊。 當前如下所示；

| A | B | C | D | E <空格為空> |

我希望它成為

| A | B | C | D | E |

在頁面上居中，內容也應居中

的HTML

<div class="profile-content">
    <ul class="content-btn">
        <li>
            <div class="digits">83</div>Followers
        </li>
        <li>
            <div class="digits">1507</div>Tweets
        </li>
        <li>
            <div class="digits">234</div>Friends
        </li>
        <li>
            <div class="digits">51</div>Likes
        </li>
        <li>
            <div class="digits">42</div>Gits
        </li>
    </ul>
    <div class="clear"></div>
</div>

的CSS

.content-btn  {
    width:100%;
    margin: 0 auto;
}

.profile-content ul li {
    float: left;
    padding: 5px 8px;
    text-align: center;
    border-right: 1px solid #eeeeee;
    border-left: 1px solid #ffffff;
}
.profile-content ul li .digits {
    font-weight: bold;
    font-size: 16px;
}

Answer 1

添加.profile-content{text-align:center}而不是浮動 li元素，請使用display:inline-block;

JSFiddle

注意：您的HTML標記中沒有.profile-card ，因此我將其從CSS選擇器中刪除了。

.profile-content ul li{...}

.profile-content ul li .digits{...}

Answer 2

.content-btn  {
    width:100%;
    margin: 0 auto;
}
.content-btn li{
    float: left;
    padding: 5px 8px;
    text-align: center;
    border-right: 1px solid #eeeeee;
    border-left: 1px solid #ffffff;
    list-style:none;
}
.content-btn li:first-child{
    border-left: 1px solid #eeeeee;
}
.profile-card .profile-content ul li .digits {
    font-weight: bold;
    font-size: 16px;
}
.clear{
    clear:both;
}

Answer 3

jsfiddle.net/g33HN/

請參閱此鏈接。 希望對您有幫助