html - 如何显示li标签中间的文字？

Question

我在 ul 和 li 标签中有一个图像列表，我想在它们上面显示它们的名字，就在 li 标签。

我对span标签使用绝对位置来覆盖img标签，但是里面的文字不会出现li 并且它会导致分别为每个 span 设置 “left”，这样它们中的每一个都会在自己的图像中间进行调整。我该如何解决这个问题？

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  display: inline;
}
.img_1 {
  text-align: center;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  top: 50%;
  left: 10%;
}

<div class="div1 div_1">
  <div>
    <img class="img_1" src="http://placehold.it/50x50" />
  </div>
  <div>
    <ul>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s1">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s2">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s3">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s4">TEXT</span>
      </li>
    </ul>
  </div>
</div>

Answer 1

我编辑了你的部分 CSS。

主要变化涉及 LI 元素。

li {
  display: inline-block;
  position:relative;
}

LI 必须表现得像 block 和 inline 元素(尽管您可以使用 float 属性代替)。 position 设置为 relative，因此内部的绝对定位元素将相对定位到它们的父元素。

关于 span 元素:

span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  bottom: 45%;
  left: 0%;
  width:100%;
}

bottom 设置为 45% 将使它们略高于垂直中间。 left 设置为 0% 并且宽度为 100% 是为了将文本放在中间(不确定它是否适用于所有浏览器。

此外，我认为可以改进这段代码以避免这些技巧。

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  display: inline-block;
  position:relative;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  bottom: 45%;
  left: 0%;
  width:100%;
}

<div class="div1 div_1">
  <div>
    <img class="img_1" src="http://placehold.it/50x50" />
  </div>
  <div>
    <ul>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s1">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s2">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s3">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s4">TEXT</span>
      </li>
    </ul>
  </div>
</div>