垂直对齐中间不适用于ul li

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> </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

垂直对齐的问题是因为您在图像上使用了align left属性（不应该使用此属性，因为已弃用对齐）。

这实际上是将图像浮动到左侧，破坏了单元格的自然流动，这就是为什么文本没有垂直对齐，为了解决这个问题，你可以将文本和图像分成不同的单元格：

 #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>