html - 将列表项对齐到 ul 容器的顶部

Question

我的 ul 中的 li 标签不是从顶部开始的。相反，它从底部开始。

我想让所有图片都从顶部开始，并且这些图片的所有标签都应该在图片下方 10px 处开始。

重要提示:图像和文本应在 li 内居中对齐。

即使标签更大，最终输出也应如下图所示:

非常感谢任何帮助。

代码在这里:https://jsfiddle.net/srshah23/suctrnuq/

.cul {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0px auto 0;
}
.cli {
  display: inline-block;
  width: 10%;
  padding: 0px 25px 0;
  background-size: 46px;
}
.cli .img {
  background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat;
  width: 46px;
  height: 46px;
  margin: 0 auto;
}

<div>
  <ul class="cul">
    <li class="cli">
      <div class="img"></div>
      <div>PRETTY LONG TEXT ABCDEFG</div>
    </li>
    <li class="cli">
      <div class="img"></div>
      <div>TEXTUAL PLANNING</div>
    </li>
    <li class="cli">
      <div class="img"></div>
      <div>PRETTY TEXT</div>
    </li>
    <li class="cli">
      <div class="img"></div>
      <div>RANDOM TEXT ABC</div>
    </li>
    <li class="cli">
      <div class="img"></div>
      <div>MEDIUM TEXT</div>
    </li>
  </ul>
</div>

Answer 1

对于您想要的对齐方式，将 vertical-align: top 和 text-align: center 添加到 li.cli。

对于图像和文本之间的边距，将 .img 中的 margin: 0 auto 更改为 margin: 0 auto 10px。

revised fiddle

---

附加信息:

您的列表项有 display: inline-block。 vertical-align 属性适用于行内元素，默认值为 baseline。

您会在您的代码中注意到(尤其是如果您应用了边框)每个列表项都与容器的基线 (demo) 对齐。使用 vertical-align: top 覆盖默认值。

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align