1

我正在尝试使用 CSS 表格设置表单，而我处于一个非常奇怪的情况，最好用小提琴来描述：

http://jsfiddle.net/GdgV4/6/

看到第三排了吗？通过添加高度小于输入框本身高度的图像，它的高度（无论如何在 Chrome 和 Firefox 上）受到非常严重的影响......<img>但是，如果我删除标签，它会很好地排列。当然<img>，小于输入框的高度，应该整齐地排列在它旁边吗？

我敢肯定这真的很简单，但任何帮助将不胜感激。

更新：澄清 - 我不想调整图像的高度，它必须保持相同的高度。我想要实现的是：如果您在屏幕上绘制 2 条触摸输入框顶部和底部的线，则图像应该出现在其中，并且我希望输入框在上方具有相同的间距，并且下面作为表单中的其他输入框。我想在不使用任何定位技巧position: relative; top: 2px或任何东西的情况下实现这一目标。

4

3 回答 3

3

用于vertical-align: middle;图像

于 2013-09-12T10:55:32.007 回答
2

采用

img{vertical-align:middle;}

它为我修好了。

或者，如果您希望它仍然像原来一样在顶部对齐，您可以更改middle为top，但个人middle看起来更好。

于 2013-09-12T10:55:21.740 回答
1

这是一个示例，可帮助解释内嵌图像如何影响文本行的整体行高。

考虑以下HTML片段：

<form>
    <div class="field-wrap ex1">
        <label for="ex1">Text</label>
        <input type="text" id="ex1" name="ex1" 
               value="Example 1.............................">
        <img src="http://placehold.it/50x32">
    </div>
    <div class="field-wrap ex2">
        <label for="ex2">Text</label>
        <input type="text" id="ex2" name="ex1" 
               value="Example 2.............................">
        <img src="http://placehold.it/50x50">
    </div>
    <div class="field-wrap ex3">
        <label for="ex3">Text</label>
        <input type="text" id="ex3" name="ex1" 
               value="Example 3.............................">
        <img src="http://placehold.it/50x64">
    </div>
    <div class="field-wrap ex4">
        <label for="ex4">Text</label>
        <input type="text" id="ex4" name="ex1" 
               value="Example 4.............................">
        <img src="http://placehold.it/50x64">
    </div>
</form>

基本上，每个input字段都有一个关联label字段和一个img标签，所有这些都包含在一个块元素.field-wrap中。

对于CSS：

form {
    font-size: 25px;
    line-height: 2;
    font-family: sans-serif;
}
.field-wrap {
    background-color: yellow;
    margin: 10px 0;
    vertical-align: middle;
}
.field-wrap input {
    font-size: inherit;
}
.field-wrap input, .field-wrap label, .field-wrap img {
    vertical-align: inherit;
}
.ex4.field-wrap {
    vertical-align: baseline;
}

这给出了以下结果：

垂直对齐示例

在所有情况下，我都选择了 25px 的字体大小，并将 line-height 设置为字体大小的 2 倍。

我还设置vertical-align: middle了所有子元素（input和label）img。这个很重要。

默认情况下，输入字段的高度由字体大小和可能应用的任何填充控制。但是，您也可以指定高度，在本例中我设置为 30px。注意输入框有1px的边框，所以整体高度其实是32px。

在示例 1 中，我选择了一个高度为 32px 的图像来匹配输入框的高度，并且垂直对齐也很好地居中。

在示例 2 中，我将图像的高度增加到 50px，现在图像正好适合高度为 50px 的父元素（由于 line-height 是 25px 字体大小的 2 倍）。

在示例 3 中，我将图像设置为 64px 高，在这种情况下，父元素的高度会增加以适应图像。这是根据 CSS 规范进行的正确渲染。

最后，在示例 4 中，我将垂直对齐设置为默认值baseline，在这种情况下，图像底部与文本底部对齐，这会迫使父块更高以适应图像高度和文本/输入字段。

这应该清楚地说明垂直对齐的工作原理。

其他评论：
要使图像准确居中，请确保边缘周围没有透明空间，如果在图像编辑程序中打开图像，这很明显。

您还可以将图像包装在一个内联块中，指定一个高度，然后将图像高度设置为 100%，这将强制尺寸奇特的图像适应特定高度。

请参阅jsFiddle上的代码

于 2013-09-12T11:18:16.303 回答