vertical-align を使用して input 要素と img 要素を整列させる方法

php中世界最好的语言
リリース: 2018-01-26 10:28:50
オリジナル
2375 人が閲覧しました

今回はvertical-alignを使ってinput要素とimg要素を整列させる方法を紹介します。実際のケースを見てみましょう。 input と img が同じ行に配置されている場合、

img タグ

は常に input よりも頭一つ高くなりますが、これは非常に見苦しいことです。これまでに多くの方法を試しましたが、どれもうまくいきません。その後、Web サイトで最も検索されたのは、img に align="absmiddle"属性 を追加することでした。この方法は実行可能ですが、HTML 標準に準拠していません。その後、input と img にvertical-align:middle を同時に追加するだけであることを偶然発見しました:
コードは次のとおりです:

input,img{vertical-align:middle;}
ログイン後にコピー

このようにして、コードは水平に整列されます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の

関連記事に注目してください。 関連書籍:

type="file" の入力ボックス スタイルを操作する方法


HTML でヘッダー構造を使用する方法


iframe を使用して Web ページに天気を表示できるようにする方法

以上がvertical-align を使用して input 要素と img 要素を整列させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート