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

Question

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

我希望所有图像从顶部开始，这些图像的所有标签应该在图像下方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。

对于图片与文字之间的边距，请在margin: 0 auto中将margin: 0 auto 10px更改为.img。

revised fiddle

其他信息：

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

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

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

Answer 2

也许你想要这样的东西。如果没有告诉我，我会改变它 - 我为文本div创建了一个额外的类'txt'，我在css上发表评论，这样你就可以很容易地理解我的变化Live Fiddle

.cul {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  /* remove the last 0 from here */
}

.cli {
  display: inline-table;
  /*change this to inline-table */
  width: 10%;
  padding: 0px 25px 10px;
  /*replace last 0 with 10px when window resize And remove the back ground size */
}

.cli .img {
  background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat;
  width: 46px;
  height: 46px;
  margin: 0 auto;
}

.txt {
  /*add this css for the gap and center text */
  text-align: center;
  margin-top: 10px;
}

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

</div>