垂直对齐中间不与ul李
问题描述：
我想垂直对齐中间li内容但无法做到这一点。垂直对齐中间不与ul李
#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 & 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 & 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 & 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>
答
一种选择是使用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 & 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 & 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 & 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>+0
需要文字对齐中心的水平和垂直对齐中间。 – Ezzuddin
答
垂直对齐的问题，里面是因为你已经使用在图像上对齐左边的属性（你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 & 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 & 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 & 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>
你是不是也想对准李里面的内容，或者对准整个锂左侧面板div中？ – kauffee000
只尝试对齐里面的内容。 – Ezzuddin