html - 如何居中列表(ul)

Question

我有一个 ul 列表，其中包含一些 li 元素，我将它们 float 到左侧。目前看起来像下面；

|一个 |乙 |丙 | D | E <空格>|

我想要它

|一个 |乙 |丙 | 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} 并 float li 元素，使用 display:inline - block ;

JSFiddle

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

.profile-content ul li{...}

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