入力と画像を揃えるためにvertical-alignを使用します

入力と画像を揃えるためにvertical-alignを使用します
input と img を同じ行に配置すると、img タグが常に input より 1 つ上になり、非常に見苦しくなります。これまでいろいろな方法を試してきましたが、どれも効果がありませんでした。その後、Web サイトで見つけた最も一般的な解決策は、img に align="absmiddle" 属性を追加することでした。この方法は実行可能であるように思われますが、HTML 標準に準拠していません。その後、input と img の両方に vertical-align:middle を追加すると機能することを偶然発見しました。


コードをコピー
コードは次のとおりです。

入力、画像{垂直配置:中央;}

こうすることで、コードは水平に揃えられます。

<<:  Ubuntu 14.04 に FTP サーバーをインストールするための実装手順

>>:  ページリファクタリングスキル - コンテンツ

推薦する

HTML、CSS、RSSフィードが正しいかどうかを確認する無料ツール

この種のエラーに対処するための 1 つの方法は、まずマークアップとスタイルシートを検証することです。...

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...

略語マークと頭字語マーク

<abbr>タグと<acronym>タグは、Web ページに表示される略語と...

SSHトンネルを使用してMySQLサーバーに接続する方法

序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...

Vueプロジェクトはログインと登録の効果を実現します

この記事の例では、ログインと登録の効果を実現するためのvueプロジェクトの具体的なコードを共有してい...

mysql-connector-java.jar パッケージのダウンロード プロセスの詳細な説明

mysql-connector-java.jar パッケージのチュートリアルをダウンロードします: ...

Linux ユーザー グループと権限の概要

ユーザーグループLinux では、すべてのユーザーはグループに属する必要があり、Linux には次の...

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

JS 配列の重複を排除する 9 つの高度な方法 (実証済みで効果的)

序文一般的な方法はここには記載されていませんが、等しいかどうかを判断するための二重ループや、比較のた...

デザイナーの「職業病」について

デザイナーは世界で最も繊細で感情的な人々だと私はいつも感じています。私がこう言うときに優越感を感じる...

CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...

純粋なCSSを使用してスクロールシャドウ効果を実現します

端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...

JSで実現したページサイドバーの効果に関する研究

目次発見: ディスプレイアニメーションの応用実装:記事の1行目を表示する効果を実現する方法実際、その...