asp.net - 如何使用 CSS 重新定位此图像？

Question

在这张图片中，您可以看到相同元素的两个版本。上面的是我得到的，下面的是我想要得到的。当然图像的底部与标签中的文本和文本框中的文本对齐，但我需要它与文本框的框对齐。我是 CSS 的新手，到目前为止我尝试过的东西甚至没有让我摆脱困境。

控件编码如下:

<asp:Label ID="TimeTextRequiredLabel" runat="server" Text="*"></asp:Label>
<asp:Label ID="TimeTextLabel" runat="server" Text="Time:&nbsp;"></asp:Label>
<asp:TextBox ID="TimeTextBox" runat="server" ReadOnly="false" Width="100"></asp:TextBox>
<asp:Image ID="TimePickerImageButton" runat="server" BorderWidth="0"
     Width="34" Height="21"  CssClass="TimePickerImage"
    ImageUrl="~/UserControls/Images/ClockPicker.gif" 
    ToolTip="Pick a time." />

在我的 CSS 中，在类“TimePickerImage”中应该有什么来向左移动它并向下移动必要的几个像素？

编辑添加:

最终采用了@JuanMendes 解决方案，以及此类:

<style type="text/css">
    .TimePickerImage {
        position: relative;
        top: .2em;
        right: .3em;
    } 
</style>

这使它恰好位于我需要的位置。谢谢!下一个任务是认真学习 CSS。到目前为止，我一直在用它玩脚本小子游戏。

编辑进一步添加:

我已经尝试了@MarcAudet 和@JuanMendes 提出的所有其他变体，上面的代码效果最好。我想我不太关心是否符合一些理论上的“理想”，而是让事情成为我需要的结果。

Answer 1

您需要在#TimePickerImageButton中添加或调整vertical-align: bottom声明

从您的屏幕截图来看，图像似乎与文本行的基线对齐，这是内联图像的默认行为。

vertical-align 将负责垂直定位。

要将元素向左移动，请尝试调整 margin-left。但是，请检查输入字段的边距，因为它可能有边距，并在输入字段和图像之间寻找一些空白。

演示

如果您有以下 HTML:

<div class="parent ex2">
    <label for="the-time">Time:</label>
    <input id="the-time" type="text">
    <img src="http://placehold.it/30x25">
</div>

并应用以下 CSS:

.ex2 img {
    vertical-align: bottom;
}

您将看到您想要的定位。

fiddle :http://jsfiddle.net/audetwebdesign/2PkUF/

如果你有高线......

如果您为 line-height: 4.0 应用更大的值，将元素对齐到行框的底部可能看起来很傻。

您也可以尝试 vertical-align: text-bottom 应该可以。

请参阅演示中的示例 3。