Question

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

文本和图像必须以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元素没有放入跨度，我不知道为什么！有光标和jauge类：

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

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

感谢帮助我！

Answer 1

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

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

Answer 2

您需要将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>

您必须按如下方式更改css类cursor，才能将图像对齐到中心位置：

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

正确地将两个div放在一个范围内

2 个答案: