垂直アラインメントミドルが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> \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 &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

オプションは、使用しているので、垂直配向性の問題がある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

内のハイパーリンクのためのフレキシボックスを使用することですあなたのイメージの左揃え属性（あなたはsh alignは非推奨になっていますので、これを使用しないでください）。効果で

これは、この問題を回避するために、あなたのテキストが垂直に整列されていない理由は、細胞の自然な流れを破壊左にあなたのイメージを浮遊し、あなたは別々のセルにテキストや画像を置くことができます。

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