使内联列表项具有一定的宽度

Question

我的列表项目左侧是图像，右侧是文本。由于每张图片的宽度不完全相同，因此文字不会垂直对齐 如何使标签垂直对齐，每个标签位于图像的右侧？感谢

.checks-row {
  display: inline-block;
}

.checks-row li {
  display: inline;
}

.check-image {
  width: 4em;
}

<ul class="checks-row">
  <li class="check-image">
    <img src="/{{this.image}}.gif">
  </li>
  <li class="check-label">{{this.label}}</li>
</ul>

Answer 1

使用以下css：

.checks-row li {
    vertical-align: middle;
    display: inline-block;
}