CSSで切り取った画像を水平方向に中央揃えする方法は?

CSS を使用して画像を水平方向に中央揃えにする

Web ページに画像を表示する場合、多くの場合、画像を水平方向の中央に配置することが望まれます。ただし、画像を切り取って一部のみを表示すると、このプロセスが複雑になる可能性があります。

提供された HTML コードでは、clip を使用して画像を切り取っていますが、切り取った画像を中央に配置するのが困難です。あなたの問題の解決策は次のとおりです:

解決策:

トリミングされた画像を水平方向に中央揃えにするには、CSS の margin-left プロパティと margin-right プロパティを使用できます。更新されたコードは次のとおりです:

<code class="css">.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}</code>

中央に配置する画像に class="center" 属性を追加します:

<code class="html"><div id="loading" class="loading-invisible">
  <img  class="loading center lazy" src="/static/imghwm/default1.png" data-src="logo.png" alt="CSSで切り取った画像を水平方向に中央揃えする方法は?" >
</div></code>

説明:

• display: block プロパティは、画像が親要素の全幅を占めるようにします。
• margin-left および margin-right: auto プロパティは、左右のマージンを「」に設定します。 auto」は、画像の周囲に残りのスペースを自動的に均等に配分し、画像を効果的に中央に配置します。

以上がCSSで切り取った画像を水平方向に中央揃えする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。