我有一个 ul 和 li 标签中的图片列表,我想在其上显示他们的名字,就在 li < strong>标签。
我使用绝对位置为 span 标记覆盖 img 标记,但文本不会出现在内li ,它会分别为每个 span 柄设置&#34; left&#34; ,这样每个柄都会在中间调整他们自己的形象。我该如何解决这个问题?
.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;
答案 0 :(得分:2)
我做了以下事情:
li {
position:relative;
}
使用绝对位置时,重要的是使用父级的相对位置来正确包含它。
我在这里找到了一篇好文章:
答案 1 :(得分:2)
给出以下css。
使用position: relative;
至li
并提供display:inline-block
代替display:inline
。
将transform: translate(0px, -50%);
提供给span
以使其成为正确的中心。
.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;
答案 2 :(得分:2)
我编辑了你的部分内容。
主要变化涉及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%
意味着将文本放在中间(不确定它是否在所有浏览器上以这种方式工作。
此外,我认为可以改进这段代码以避免这些伎俩。
.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;
答案 3 :(得分:1)
您可以将<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>
答案 4 :(得分:1)
请参阅以下更新的代码:
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 } */
这将使您的代码处于所需的中心