垂直对齐中间不与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>