将图像放置在另一个html元素的顶部

我有以下资料：

以下是html代码：

<p>
    <label>Select Roles</label>
    <span id="dualselect" class="dualselect">
        <img id="loading1"  src="@Url.Content("~/content/template/images/loaders/loader7.gif")" alt="Img Not Avalible" />
        <select name="RolesSelect" id="dualSelectRoles1" multiple="multiple" size="10">
            <option value="2">Avaliable Roles</option>
        </select>

        <span class="ds_arrow">
            <span class="arrow ds_prev">&laquo;</span>
            <span class="arrow ds_next">&raquo;</span>
        </span>
        <img id="loading2"  src="@Url.Content("~/content/template/images/loaders/loader7.gif")" alt="Img Not Avalible" />
        <select name="select4" multiple="multiple" id="dualSelectRoles2" size="10">
            <option value="1">Users Roles</option>
        </select>
    </span>
</p>
<p class="stdformbutton">
    <button class="submit radius2" type="submit">Save</button>
</p>

选择角色
可用角色
&拉阔；
&拉阔；
用户角色


拯救

---

如何定位每一个图像，使其位于框的中间（顶部）？

< p>可以应用<代码>位置：固定；<代码>样式

为图像分配一个类：

<img id="loading1" class="loading" ... />

---

您需要在select&loader图像周围放置一个包装器，如下所示：

HTML

<div>
    <select name="select4" multiple="multiple" size="10">   
        <option value="1">Users Roles</option>
    </select>
    <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" />
</div>

<div>
    <select name="select4" multiple="multiple" size="10">   
        <option value="1">Users Roles</option>
    </select>
    <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" />
</div>

img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px; // half the loader width
    margin-top: -8px; // half the loader height
}

div, select {
    position: relative;
    width: 500px;
}