img を a で囲んだときに下部に表示される高さが小さい問題の解決策。 CSSを使用して画像を水平方向と垂直方向の中央に配置する方法。 _html/css_WEB-ITnose

<a><img/></a>

インターフェースをプレビューすると、この構造は高さが余分に表示されることがあります。最初は何が原因でこの高さになったのか疑問に思いました。 aラベルにマウスを移動すると高さが表示されます。最初はaラベルの高さだと思いました。でも、a は隠れていると思います。隠れると非常に引き伸ばされてしまうのではないかと思います。そして、 a のさまざまなプロパティを設定しましたが、この問題を解決できません。その後、別のレーベルでもいいのではないかと考えました。たとえば、外側の div タグや img タグです。外部のdivを色々いじってみたのですが、やはり全く反応がありません。さて、問題はほぼ明らかです。この時は、やってみないと分からないけど、やってみたらショックです。これは本当に問題です。 img の属性は本当に特殊だった記憶があります。インラインブロックラベルなので。次に、imgにdisplay:block;を設定すると、高さが消えました。本当に、これが本当に問題なのです。次回この問題が発生した場合は、ブロック ラベルを設定するだけです。私の記憶力はあまりよくないので、記録しておかないと次回には忘れてしまいます。

別の問題があります: 画像の水平方向と垂直方向のセンタリングと適応性です

まず、私が以前にそれをどのように解決したかについて話しましょう。以前にこの問題を解決するために js を使用しました。しかし後になって、CSS がこの問題を直接かつ便利に解決できることがわかりました。もちろん、すべてのビジネス ロジック シナリオに適しているかどうかはわかりません。しかし、少なくとも私が最近見つけたものは、このように使用できます。次回はこの方法を簡単に見つけるために、やはり記憶力が悪いので記録しておきます。

<div>	<img src="1.png"></div>

div は text-align:center を設定します。画像を中央に配置するには、高さを line-height=height に設定します。 もちろん、img にvertical-align:middle を設定して、垂直方向に中央に配置することもできます。

実はこれが最も基本的なものです。私は物覚えが悪くて愚かな鳥だと誰が言ったのですか？書き留めることしかできません。