对齐<ul>列表中的文本</ul>

时间:2013-04-10 16:04:30

标签: html css

如何在ul列表中对齐文本?我尝试了vertical-align:middle但它没有工作

我有替代方案吗?

以下是小提琴链接:http://jsfiddle.net/TBEnf/1/ 这是我的代码

<style>
.profilePicture {
    width:200px;
    height:200px;
    border:1px solid #808080;
    margin:5px;

}

.UploadPicture ul li a {
    display:table-cell;
    text-decoration:none;
    margin-left:10px;
    padding-left:30px;
    padding-right:30px;

}
.UploadPicture ul li {
    display:table-cell;
    list-style-type:none;
    margin:10px;
    vertical-align:middle;
    display:block;
    background:#ff6a00;
}
.UploadPicture ul li:hover {
    background:#808080;
}
 .UploadPicture ul {
     display:table-row;
}

   <div class="UploadPicture">
                <ul>
                    <li><a href="#">Change Profile Picture</a></li>
                    <li><a href="#">Privacy</a></li>
                </ul>
            </div>

1 个答案:

答案 0 :(得分:2)

display:table-cell样式中删除a。然后text-align:center就可以了。

.UploadPicture ul li a {
    text-decoration:none;
    margin-left:10px;
    padding-left:30px;
    padding-right:30px;

}
.UploadPicture ul li {
    list-style-type:none;
    margin:10px;
    vertical-align:middle;
    display:block;
    background:#ff6a00;
    text-align: center;
}

另请注意,语法为text-align: center ,而非 middle

Updated JSFiddle