垂直對齊中間不與ul李

Question

我想垂直對齊中間li內容但無法做到這一點。

#leftPanel { 
 
    width:25%; 
 
    display:table; 
 
} 
 
#leftPanel li { 
 
    list-style: none; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
} 
 
#leftPanel li img { 
 
    margin-right:10px; 
 
} 
 
.activeBtn, .button5 { 
 
    display: table-cell; 
 
    float: none; 
 
    width: 100%; 
 
    background:#ccc; 
 
    height: 100%; 
 
    vertical-align:middle; 
 
}

<div id="leftPanel"> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="activeBtn"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Location &amp; Sub Location" align="left">Location: Sub Location</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Issued To" align="left">Issued To</a> \t 
 
    </li> 
 

 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Non Conformance Standard Items" align="left">Non Conformance Standard items</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Attendee &amp; Company" align="left">Attendee : Company</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Construction Calendar" align="left">Construction Calendar</a> 
 
    </li>  
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Associate Users &amp; Permission" align="left">Associate Users : Permission</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Cost Code Form" align="left">Cost Code</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 

Answer 1

一種選擇是使用Flexbox的超鏈接的li元素

#leftPanel { 
 
    width: 25%; 
 
} 
 

 
ul { 
 
    width: 100%; 
 
} 
 

 
#leftPanel li { 
 
    list-style: none; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
} 
 

 
#leftPanel li a { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#leftPanel li img { 
 
    margin-right: 10px; 
 
} 
 

 
.activeBtn, 
 
.button5 { 
 
    width: 100%; 
 
    background: #ccc; 
 
    height: 100%; 
 
}

<div id="leftPanel"> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="activeBtn"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Location &amp; Sub Location" align="left">Location: Sub Location</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Issued To" align="left">Issued To</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Non Conformance Standard Items" align="left">Non Conformance Standard items</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Attendee &amp; Company" align="left">Attendee : Company</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Construction Calendar" align="left">Construction Calendar</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Associate Users &amp; Permission" align="left">Associate Users : Permission</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Cost Code Form" align="left">Cost Code</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

垂直對齊的問題，裏面是因爲你已經使用在圖像上對齊左邊的屬性（你sh不應該使用這個作爲對齊已被棄用）。

這實際上是浮動圖像向左破壞細胞這就是爲什麼你的文本不垂直對齊，自然流動來解決這個問題，你可以把你的文字和圖像轉換成不同的細胞：

#leftPanel { 
 
    width: 25%; 
 
} 
 

 
#leftPanel ul { 
 
    display: table; /* moved this to the ul */ 
 
    width: 100%; 
 
} 
 

 
#leftPanel li { 
 
    display: table-row; /* added this (just makes it a little more browser proof) */ 
 
    list-style: none; 
 
    margin-bottom: 10px; 
 
    width: 100%; 
 
} 
 

 
#leftPanel li img { 
 
    margin-right: 10px; 
 
    display:block;  /* added this to get rid of the space under the image */ 
 
} 
 

 
#leftPanel li>a {  /* make the anchors table-cell */ 
 
    display: table-cell; 
 
    background: #ccc; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
#leftPanel li>a:last-child { 
 
    width: 100%;    /* this just makes the text field expand to take the remaining space */ 
 
}

<div id="leftPanel"> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="activeBtn"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Location &amp; Sub Location"></a><a href="#" class="activeBtn">Location: Sub Location</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Issued To" align="left"></a><a href="#" class="button5">Issued To</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Non Conformance Standard Items"></a><a href="#" class="button5">Non Conformance Standard items</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Attendee &amp; Company"></a><a href="#" class="button5">Attendee : Company</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Construction Calendar"></a><a href="#" class="button5">Construction Calendar</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Associate Users &amp; Permission"></a><a href="#" class="button5">Associate Users : Permission</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="button5"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Cost Code Form"></a><a href="#" class="button5">Cost Code</a> 
 
    </li> 
 
    </ul> 
 
</div>