1

テキストと 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 要素がスパンに配置されず、理由がわかりません! cursor クラスと jauge クラスがあります。

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

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

助けてくれてありがとう！

4

2 に答える 2

0

spanas を指定する必要があります。そうしないと、内部要素のスタイルを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 に答える
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 に答える