如何将列表居中

黑珍珠

我有一个ul包含一些li元素的列表，然后将它们向左浮动。当前如下所示；

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

Vucko

添加.profile-content{text-align:center}和istead浮动的li元素，使用display:inline-block;

JSFiddle

注意：.profile-card您的HTML标记中没有任何标记，因此我从CSS选择器中将其删除。

.profile-content ul li{...}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。