CSSで単語と画像を配置する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで単語と画像を配置する方法

藏色散人

Jan 06, 2021 am 09:17 AM

css

CSSで文字と絵を揃える方法 1. CSSの「vertical-align:middle;」を追加して文字と絵を揃える; 2. CSSの配置で背景画像を設定して文字と絵を揃える; 3 . テキストと画像を別の div に配置して、文字と画像を揃えます。

CSSで単語と画像を配置する方法

このチュートリアルの動作環境: 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="/static/imghw/default1.png"  data-src="logo.jpg"  class="lazy"   alt=""   style="max-width:90%"><a href="">找回密码</a>
    </div>
</body>
</html>

ログイン後にコピー

効果画像:

CSSで単語と画像を配置する方法

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>

ログイン後にコピー

レンダリング:

CSSで単語と画像を配置する方法

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="/static/imghw/default1.png"  data-src="logo.jpg"  class="lazy"   alt=""></div>
        <div><a href="">找回密码</a></div>
    </div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSSで単語と画像を配置する方法

プログラミング関連の詳細については、知識については、プログラミング教育をご覧ください。！

以上がCSSで単語と画像を配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7343

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダーテキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベストプラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパンタグは、テキストにスタイル、属性、または動作を追加できます。色やフォントサイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォントサイズに対する相対単位です。次の特性があります: ルート要素のフォントサイズに相対し、親要素の影響を受けません。ルート要素のフォントサイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォントサイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォントサイズを調整することで、グローバルフォントサイズを簡単に変更できます。

vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノードタイプには、要素ノード、テキストノード、コメントノード、ドキュメントノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページコンテンツ、イベント処理、アニメーション、およびデータバインディングを動的に作成するのに役立ちます。

ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザプラグインは通常、次の言語で作成されます。フロントエンド言語: JavaScript、HTML、CSS バックエンド言語: C++、Rust、WebAssembly その他の言語: Python、Java

Vueのrefとidは何をするのでしょうか? May 02, 2024 pm 08:42 PM

Vue.js では、JavaScript で ref を使用して DOM 要素 (サブコンポーネントおよび DOM 要素自体にアクセス可能) を参照し、id を使用して HTML id 属性を設定します (CSS スタイル、HTML マークアップ、および JavaScript ルックアップに使用できます) ）。