div 内の img と span の垂直方向の中央揃えの問題について

div 内の img と span の垂直方向の中央揃えの問題について

以下のように表示されます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>   
  2. <ヘッド>   
  3. <スタイル>   
  4. #テスト *{vertical-align:middle;}
  5. </スタイル>   
  6. <本文>   
  7. < div   
  8. id = "テスト" >   
  9. <画像  
  10. src = "http://127.0.0.1:7001/wsc/images/message.png" />   
  11. < span > sdfhsdhfdksfjhtes: </ span >   
  12. </div>   
  13. </本文>   
  14. </html>   

ご注意ください: #test *{vertical-align:middle;}s

#test * は、span、input、img などのインライン要素を含む div 内のすべての要素を表します。

垂直方向の配置
初期値: ベースライン (デフォルト値)
継承可能: いいえ 適用対象: インライン要素 説明: vertical-align:baseline は、要素のベースラインを親要素のベースラインに揃えます。
警告: vertical-align は、表のセル内のコンテンツの配置には影響しません。また、ブロック要素内のコンテンツの配置にも影響しません。

注意: vertical-align は、span、img、em、input、a などのインライン要素にのみ影響し、div、h3、p などのブロック要素には無効です。

以上が、エディターが提供した、div 内の img と span の垂直中央揃えの問題についての内容です。お役に立てれば幸いです。123WORDPRESS.COM を応援してください。

<<:  ウェブサイトをIE6、7、8、9の古いバージョンに対応させるための3つのソリューション

>>:  JavaScript の非同期処理で待機時間を節約できますか?

推薦する

Centos に PHP7.4 と Nginx をインストールする方法

準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...

HTMLのタグについての簡単な説明

0. タグとは何ですか? XML/HTML コードコンテンツをクリップボードにコピー<入力 t...

デザイン理論: テキストの読みやすさと可読性

<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...

div+css3 を使用して背景グラデーション ボタンを実装するためのサンプル コード

フロントエンド ページの需要が増加し続けるにつれて、一部のシーンではグラデーションの背景要素が必要に...

CSSマスクのフルスクリーン中央揃えを実装する方法

具体的なコードは次のとおりです。 <スタイル> #トーストローダーフルスクリーン{ 高さ...

ジョセフリング問題を解決する 3 つの JavaScript メソッド

目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...

画像ボタン送信とフォーム繰り返し送信の問題に関する議論

多くの場合、フォームを美しくするために、送信ボタンが画像に置き換えられます。ただし、細部に注意を払わ...

MySQL 5.7 でデータベースのデータ保存場所を変更する方法

MySQL データベースに保存されるデータが徐々に増加すると、元のストレージ領域がいっぱいになり、M...

CSS パフォーマンスの最適化 - will-change の使用方法の詳細な説明

will-change は、要素にどのような変更が行われるかをブラウザに伝え、ブラウザが事前に最適化...

2 つの MySQL ユーザー削除ステートメント (delete user と drop user) の違い

ヒント: MySQL では、ユーザーの作成と削除が頻繁に必要になります。ユーザーを作成するときは、通...

InnoDB タイプの MySql によるテーブル構造とデータの復元

前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...

一般的なMySQLコマンドの概要

mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 !環境変数にm...

Vueを使用してタイマー機能を実装する

この記事の例では、タイマー機能を実装するためのVueの具体的なコードを参考までに共有しています。具体...

WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。

1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...

Dockerコンテナにnginxを簡単にデプロイするプロセスの分析

1. コンテナにnginxサービスをデプロイするcentos:7 イメージはコンテナを実行し、このコ...