[英]Aligning the text inside a <ul> list
如何在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>
除去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 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.