CSSでアイコンを含む背景画像を整列する

アイコンをDIVで整列しようとしています。私は次のコードを持っています。このコードは、アイコンを入力の右側に表示します。これは、私が望むものです。しかしそれはあまりにも高すぎます。アイコンを下に移動する必要があります。CSSでアイコンを含む背景画像を整列する

<div> 
    <input name="Password" type="password"> 
    <span style="display: inline-block; margin-top: 9px;" class="ui-icon"></span> 
</div>

UI-アイコンのCSSは次のようになります。

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }

私は余裕トップと試みたが、それは動作しません。私が必要とするのは、アイコンを約5ピクセル下にするための方法です。私が紛失しているものはありますか？

出典

2012-02-11 Samantha J T Star

なぜ問題がダウングレードされましたか？妥当な質問だと思ったので疑問に思ってしまいました。所有しなくてもそれをやることができるからといって、ダウングレードするのが恥ずかしいです。 –

あなたはこのようなCSSでそれを行うことがあります。（代わりに背景スパンの使用IMG）

vertical-align:middle;

または別の方法でそれに応じて、トップを調整することができる

position:relative; 
float:left; 
top:10px;

を設定することができます。

出典

2012-02-11 09:45:14 daerty0153

これは、背景画像の位置を変更するために何もしません – twilson

実際にはありますか。ここで確認してください（縦に並べてください）：http：//www.w3schools.com/cssref/tryit.asp？filename = trycss_vertical-align – daerty0153

いいえ、そうではありません。あなたは 'img'タグのアライメントを変更するものにリンクしていますし、' img'タグとはまったく関係がないCSSで指定された 'background-image'ではなく** **リンクしています。 CSSを使用すると、グラフィックスがコンテンツの一部であることを防ぐこともできます。この場合、ほとんどの場合、そうではありません。 – twilson

background-position:right center;

あなたはCSS background-positionプロパティを使用したいmargin-top: 9px;

出典

2012-02-11 09:45:43 mgraph

削除は、あなたは座標を指定することができます。参照：

http://www.w3schools.com/cssref/pr_background-position.asp

出典

2012-02-11 09:46:18 twilson

CSSでアイコンを含む背景画像を整列する

答えて

関連する問題