中間アラインメントをli
にしようとしていますが、できません。垂直アラインメントミドルがul 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 & 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>
あなたはまた、李内のコンテンツを揃え、または左側のパネルのdivの内側全体李を揃えるしようとしていますか? – kauffee000
li内のコンテンツの整列だけを試みます。 – Ezzuddin