ホームページ > 記事 > ウェブフロントエンド > CSSで単語と画像を配置する方法
CSSで単語と画像を配置する方法
- 藏色散人オリジナル
- 2021-01-06 09:17:4522842ブラウズ
CSSで文字と絵を揃える方法 1. CSSの「vertical-align:middle;」を追加して文字と絵を揃える; 2. CSSの配置で背景画像を設定して文字と絵を揃える; 3 . テキストと画像を別の div に配置して、文字と画像を揃えます。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
推奨: 「css ビデオ チュートリアル 」
HTML コードでは、テキストの横にアイコンを追加する必要がある場合があります。
デフォルトでは図が上に、文字が下に配置されるため、通常は図が高く、文字が低くなり、中央に横方向に配置することはできません。
一般的な方法は 1. CSS に「vertical-align:middle;」を追加する、2. 画像が背景画像の場合は CSS で背景画像を設定する、3. を分離する、の 3 つがあります。テキストと画像を別の div に分割します。上記 3 つの方法はいずれも画像と文字を同一行に表示することができますので、以下に例を示して応用してみましょう。
1.「vertical-align:middle」属性を追加します
実際の例として「ログイン」を使用し、「ログイン」を画像化し、「パスワードの取得」を設定します。記述された HTML コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<img src="logo.jpg" alt="" style="max-width:90%"><a href="">找回密码</a>
</div>
</body>
</html>効果画像:
2. 画像を背景画像として設定します
画像 背景画像の場合は、CSSの「background」を使用して画像を設定できます。HTMLコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.haokan{
width: 300px;
height: 50px;
line-height: 50px;
background-color: red;
background: url(logo.jpg) no-repeat left center;
}
.haokan a{
display: block;
margin-left: 116px;
}
</style>
</head>
<body>
<div>
<a href="">找回密码</a>
</div>
</body>
</html>レンダリング:
3 、画像とテキストをそれぞれ別の div に配置します。HTML コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divs .imgs{
display: inline-block;
vertical-align: middle;
}
.divs .infos{
display: inline-block;
}
</style>
</head>
<body>
<div>
<div><img src="logo.jpg" alt=""></div>
<div><a href="">找回密码</a></div>
</div>
</body>
</html>レンダリング:
プログラミング関連の詳細については、知識については、プログラミング教育をご覧ください。 ！
以上がCSSで単語と画像を配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。