垂直对齐中间不能与ul li一起使用 [英] Vertical align middle not working with ul li
本文介绍了垂直对齐中间不能与ul li一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图垂直对齐中间 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;宽度：100％;背景：#CCC;身高：100％ vertical-align：middle;}
< div id = leftPanel > < UL> <李> < a href =＃class =activeBtn>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =位置& amp;子位置align =left>位置：子位置< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =发行至align =left>发行至< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =不符合标准项目align =left>不符合标准项目< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =参加者&公司align =left>参加者：公司< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =施工日历align =left>施工日历< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =关联用户和权限align =left>关联用户：权限< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =成本代码表单align =left>成本代码< / a> < /锂> < / UL>< / DIV>
解决方案
为 li 元素内的超链接使用flexbox
#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;}。背景：#ccc;
< div id = leftPanel> < UL> <李> < a href =＃class =activeBtn>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =位置& amp;子位置align =left>位置：子位置< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =发行至align =left>发行至< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =不符合标准项目align =left>不符合标准项目< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =参加者&公司align =left>参加者：公司< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =施工日历align =left>施工日历< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =关联用户和权限align =left>关联用户：权限< / a> < /锂> <李> < a href =＃class =button5>< img src =https://i.stack.imgur.com/yEshb.gifwidth =49height =45alt =成本代码表单align =left>成本代码< / a> < /锂> < / div>
I am trying to vertical align middle li content but not able to do it.
#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>
</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>
解决方案
An option is to use a flexbox for the hyperlink inside the li element
#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>
这篇关于垂直对齐中间不能与ul li一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
