问题描述
我试图垂直对齐中间 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一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!