1

我必须在文本底部设置一个文本和一个图像。

文本和图像必须以 div / span 为中心。

div/span 必须向左对齐 33%，例如：

left: 33.33%

当我尝试这段代码时：

<span style="display:table;left: 33.33%;">    
<div style="display:block;position:absolute;top:-35px;font-size:12px;">Text</div>
<div style="display:block;position:absolute;top:-20px;font-size:12px;" class="cursor jauge"></div>
</span>

div 元素没有放在 span 中，我不知道为什么！有 cursor 和 jauge 类：

.cursor {
    background: url("../img/cursor.png") no-repeat;
    background-size: 18px 18px;
}

.jauge {
    height: 18px;
    width: 18px;
}

感谢帮助我！

4

2 回答 2

0

跨度意味着是一个内联元素。尝试使用 div 而不是跨度：

<div style="display:table;left: 33.33%;">
  <div style="display:block;position:absolute;top:-35px;font-size:12px;">Text</div>
  <div style="display:block;position:absolute;top:-20px;font-size:12px;" class="cursor jauge"></div>
</div>
于 2013-10-23T15:13:45.857 回答
0

您需要给出span，否则除了给出内部元素样式之外，position:absolute它不会占用您分配的位置，因为这样元素将被放置为相对于它们可能的位置的定位。left:33.33%position:relative

所以你的代码应该是：

<span style="display:table; left:33.33%; position:absolute;">
    <div style="width:100%; position:relative; top:-35px; font-size:30px;">Text</div>
    <div style="width:100%; position:relative; top:-20px; font-size:12px;" class="cursor jauge"></div>
</span>

cursor您必须按如下方式更改 css 类以将图像对齐到中心：

.cursor {
    background: url("../img/cursor.png") no-repeat;
    background-size: 18px 18px;
    background-position:center;
}
于 2013-10-23T15:22:18.300 回答