3

在此图像中，您会看到相同元素的两个版本。顶部是我得到的，底部是我想要结束的。当然，图像的底部与标签中的文本和文本框中的文本对齐，但我需要它与文本框的框对齐。我在 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 提出的所有其他变体，上面的代码效果最好。我想我不太在乎是否符合一些理论上的“理想”，而是让事情达到我需要的结果。

4

2 回答 2

3

您需要添加或调整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。

于 2013-04-23T21:17:40.283 回答
1

你总是可以欺骗和定位图像自己捏造值直到它排队（如果你找不到更好的方法）http://jsfiddle.net/vTCHW/

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

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

您提到Marc 的回答几乎足够好。我认为这是一个更好的解决方案。您可以通过从输入中删除填充/边距来正确排列所有三个。http://jsfiddle.net/vTCHW/1/请注意，许多人使用CSS 重置系统会为您处理边距/填充

img {
    vertical-align: bottom;
}

input {
    padding: 0;
    margin: 0;    
}
于 2013-04-23T21:37:53.333 回答