Question

在此图像中，您会看到相同元素的两个版本。最重要的是我得到的，底部是我想要最终得到的。当然，图像的底部与标签中的文本和文本框中的文本对齐，但我需要它与文本框的框对齐。我在CSS上有点新手，到目前为止我尝试过的东西都不会让我失望。

enter image description here

控件编码如下：

<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

您需要在vertical-align: bottom

中添加或调整#TimePickerImageButton声明

从屏幕截图中可以看出，图像与文本行的基线对齐，这是内嵌图像的默认行为。

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

您将看到您想要的定位。

小提琴：http://jsfiddle.net/audetwebdesign/2PkUF/

如果你有高大的线条......

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

您也可以尝试使用vertical-align: text-bottom。

参见演示中的例3。

Answer 2

你总是可以自己欺骗和定位图像，直到它排成一行（如果你找不到更好的方式）http://jsfiddle.net/vTCHW/

在FF，IE 8/9和Chrome中测试

img {
    position: relative;
    top: .3em;
}

你提到Marc's answer几乎已经足够好了。我认为这是一个更好的解决方案。您可以通过从输入中删除填充/边距来正确排列所有三个。 http://jsfiddle.net/vTCHW/1/请注意，很多人使用CSS reset system来处理边距/填充

img {
    vertical-align: bottom;
}

input {
    padding: 0;
    margin: 0;    
}

如何使用CSS重新定位此图像？

2 个答案: