Question

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

我使用绝对位置为 span 标记覆盖 img 标记，但文本不会出现在内li ，它会分别为每个 span 柄设置＆＃34; left＆＃34; ，这样每个柄都会在中间调整他们自己的形象。我该如何解决这个问题？

＆＃13;
＆＃13;
.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%; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

我做了以下事情：

li {
  position:relative;
}

使用绝对位置时，重要的是使用父级的相对位置来正确包含它。

我在这里找到了一篇好文章：

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

给出以下css。

使用position: relative;至li并提供display:inline-block代替display:inline。

将transform: translate(0px, -50%);提供给span以使其成为正确的中心。

＆＃13;

.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;
}
.img_1 {
  text-align: center;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0px, -50%);
}

＆＃13;

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

＆＃13;

Answer 3

我编辑了你的部分内容。

主要变化涉及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%;
}

设置为45％的

bottom会将它们略微放在垂直中间位置上方。 left设置为0%，宽度设置为100%意味着将文本放在中间（不确定它是否在所有浏览器上以这种方式工作。

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 4

您可以将<li>中的每个元素包裹在<div style = "position:relative">

中

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
}
.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>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s1">TEXT</span>
        </div>
      </li>
      <li>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s2">TEXT</span>
        </div>
      </li>
      <li>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s3">TEXT</span>
        </div>
      </li>
      <li>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s4">TEXT</span>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 5

请参阅以下更新的代码：

server.on('published', function (packet, client) {
    if (packet.topic == 'presence') {
        var stringBuf = packet.payload.toString('utf-8');
        var obj = JSON.parse(stringBuf);
        console.log(obj);
    }
});
/* output: { someVar: 888, someNum: 234 } */

这将使您的代码处于所需的中心

如何在li标签中间显示文字？

5 个答案: