ホームページ > 記事 > ウェブフロントエンド > CSS コードを使用して画像とテキストを同じ行に配置して表示する方法_html/css_WEB-ITnose
CSS コードを使用して画像とテキストを同じ行に配置して表示する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:554892ブラウズ
CSS を初めて使用する初心者の友人にとって、テキストと画像が同じ行または同じ div に表示されると、ブラウザーで実行したときの表示効果が異なることがよくあります。 CSS コードを使用して、画像とテキストを同じ行に表示および整列させることはできますか?
この現象には 3 つの方法があります:
1. CSS の「vertical-align:middle;」を追加することで、背景画像を CSS で設定できます。次にテキストのパディング属性を設定します
3. テキストと画像を別の div に配置します。
多くのテストを行った結果、上記の 3 つのメソッドはすべて同じ行に画像とテキストを表示できることがわかりました。以下では、Ma Haixiang が例を使用して操作方法を説明します。
1. div に「vertical-align」を追加します。 CSS :middle" 属性内
一部の友人は、コンテンツの行に写真やテキストがある場合、テキストが自動的に下に配置され、外観に影響を与えることが多いことに気づくでしょう。では、垂直方向に対して中央揃えにする方法このようにして、テキストが配置されている行に CSS 属性を追加します。同じ行の中央に配置されます。
ここで、Ma Haixiang は、実際のアプリケーションでよく遭遇する「登録、ログイン、およびパスワードの取得」を例として使用し、「登録」と「ログイン」を画像にし、「パスワードの取得」を Word に設定します。
html コードは次のとおりです:
< ;a href="#">パスワードの取得
のcssコードは以下の通りです:
#denglu *{ Vertical-align:middle; /* 中央揃え, * /
font-size:14px; }
ブラウザで実行した後のレンダリングは次のとおりです:
画像とテキストの位置を揃えるには、CSSの「vertical-align:middle」属性を使用するのが非常に一般的です。この方法は、コードの最適化と効率化にさらに役立つ方法でもあります (詳細については、Ma Haixiang のブログ「Web サイト CSS コード最適化の 7 つの原則」の関連する紹介を参照してください)。ぜひ皆さんもこの方法をマスターしてください。
2. 画像を背景画像として設定します
画像自体が背景画像の場合は、CSS の「background」を使用して画像を設定し、テキストのパディング属性を設定して画像を表示します。同じページに行が表示されます。
html コードは次のとおりです:
#denglu { background:url(login.gif) no-repeat left center; #zhaohuimima{ 3. テキストと画像をそれぞれ別の div に配置します 最後の方法は、画像とテキストをそれぞれ別の div に配置し、「margin」属性を使用してそれらを同じ上に配置することです。ライン。 html コードは次のとおりです。 #zhaohuimima{ font- size:14px; padding-left:50px;
css コードは次のとおりです:
font-size :14px ;
padding-left:50px;
}
CSSで背景画像を設定し、テキストのpadding-left属性を設定すると、画像とテキストが同じ行に表示され、実行結果は画像を切り取りません。ご自身で試してみてください。
CSSコードは次のとおりです:
}
ブラウザで実行すると、このメソッドは画像とテキストを同じ行に表示することもできることがわかります。ちょっと面倒そうなので、個人的には最初の方法をお勧めします。