1

CSS テーブルを使用してフォームをセットアップしようとしていますが、フィドルで説明するのが最も適切な非常に奇妙な状況にあります。

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

3行目が見えますか？高さが入力ボックス自体の高さよりも小さい画像を追加すると、(とにかく Chrome と Firefox で) 高さがかなり悪影響を受けます...<img>ただし、タグを削除すると、うまく整列します。確かに<img>、入力ボックスの高さよりも小さいので、入力ボックスに沿ってきれいにスロットする必要がありますか?

本当に簡単なことだと思いますが、何か助けていただければ幸いです。

更新：明確にするために-画像の高さを調整したくないので、同じ高さに保つ必要があります。私が達成しようとしているのはこれです:入力ボックスの上部と下部に触れる画面全体に2本の線を引くと、それらの中に画像が表示され、入力ボックスの上下に同じ量の間隔が必要ですフォーム内の他の入力ボックスとして以下。私は、ポジショニングハックなどを使用せずにこれを達成したいと考えていposition: relative; top: 2pxます。

4

3 に答える 3

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 のフォント サイズを選択し、行の高さをフォント サイズの 2 倍にしました。

またvertical-align: middle、すべての子要素 ​​( input、labelおよびimg) を設定します。これは重要。

デフォルトでは、入力フィールドの高さは font-size と適用されるパディングによって制御されます。ただし、高さを指定することもできます。この場合は 30px に設定します。入力ボックスには 1 ピクセルの境界線があるため、全体の高さは実際には 32 ピクセルであることに注意してください。

例 1 では、入力ボックスの高さに合わせて高さ 32px の画像を選択しました。垂直方向の配置も同様に中央揃えになっています。

例 2 では、画像の高さを 50px に増やし、画像が高さ 50px の親要素に正しく収まるようになりました (line-height が 25px のフォント サイズの 2 倍であるため)。

例 3 では、画像の高さを 64px にしました。この場合、親要素の高さは画像に合わせて増加します。これは、CSS 仕様に従った正しいレンダリングです。

最後に、例 4 では、垂直方向の配置をデフォルトの に設定しますbaseline。この場合、画像の下部がテキストの下部と一致します。これにより、親ブロックが画像の高さに合わせてさらに高くなります。テキスト/入力フィールド。

これにより、垂直方向の配置がどのように機能するかが明確になります。

その他のコメント:
画像を正確に中央に配置するには、エッジの周りに透明なスペースがないことを確認してください。これは、画像を画像編集プログラムで開いた場合に明らかです。

画像をインライン ブロックでラップし、高さを指定してから、画像の高さを 100% に設定することもできます。これにより、奇妙なサイズの画像が特定の高さに収まるように強制されます。

jsFiddleでコードを参照してください

于 2013-09-12T11:18:16.303 に答える