Question

我正在尝试垂直对齐中间li内容但无法执行此操作。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

一个选项是将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 &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

垂直对齐的问题是因为您在图像上使用了align left属性（不应该使用此属性，因为已弃用对齐）。

这实际上会将图像向左浮动，从而破坏单元格的自然流动，这就是为什么文本没有垂直对齐，为了解决这个问题，你可以将文本和图像分成不同的单元格：

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

垂直对齐中间不适用于ul li

2 个答案: