HTMLで画像を中央に配置する方法-フロントエンドQ&A-php.cn

HTMLで画像を中央に配置する方法

PHPz

リリース： 2023-04-25 13:51:42

オリジナル

50072 人が閲覧しました

HTML 言語は Web デザインと開発に不可欠な部分であり、Web ページに不可欠な要素の 1 つとして画像も広く使用されています。ただし、画像を挿入すると、その画像が Web ページの中央に配置されない場合があり、これは明らかにデザイン効果に影響します。では、画像を中央に配置するにはどうすればよいでしょうか?

画像を中央に配置するには、HTML コードと CSS スタイルの知識を習得する必要があります。以下で詳しく見ていきましょう。

方法 1: HTML コードを使用する

Web ページでは、HTML 言語を使用して、画像が中央に配置されるように位置を制御できます。具体的な実装方法は以下の通りです。

HTML内にpicture要素を作成します。例:

<img src="图片路径" class="center">

ログイン後にコピー

class属性に「center」スタイルを追加します。。スタイルは HTML ファイルに直接追加することも、CSS ファイルのクラスセレクターを使用して追加することもできます。次のように:

HTML ファイル内:

<style>
    .center {
        display: block;
        margin: auto;
    }
</style>

ログイン後にコピー

CSS ファイル内:

.center {
    display: block;
    margin: auto;
}

ログイン後にコピー

方法 2: CSS スタイルを使用する

CSS スタイル画像を中央に配置する一般的な方法の 1 つは次のとおりです。

img タグにラッピングレイヤを追加します。

<div class="wrapper">
  <img src="图片路径">
</div>

ログイン後にコピー

CSS ファイルのラッピングレイヤーにスタイルを追加します。

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

ログイン後にコピー

上記のコードでは、display: flex; は Web ページのコンテンツレイアウトを Flex レイアウトに変更するために使用され、justify-content: center; は画像を水平方向に中央揃えするために使用され、align-項目: 中央; 画像を垂直方向に中央に配置するために使用され、高さ: 100%; 画像の高さを調整するために使用されます。

上記のコードをより具体的かつ直感的にするために、以下の例を通してさらに詳しく学習します。

例 1:

まず、次のコードを HTML ファイルに追加します。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>图片水平居中</title>
      <style>
         #centerImage {
            display: block;
            margin: 0 auto;
         }
      </style>
   </head>
   <body>
      <img id="centerImage" src="https://picsum.photos/id/42/400/400">
   </body>
</html>

ログイン後にコピー

上記のコードでは、画像は div 要素にあり、id div のは "centerImage" です。 CSS スタイルシートでは、「display: block;」を使用します。このスタイルは画像をブロック要素に変換でき、「margin: 0 auto;」形式は画像を水平方向に中央揃えにできます。これらのスタイルを画像のラッピングレイヤーに入れると、画像を水平方向に中央揃えにすることができます。

例 2:

HTML コード:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>图片垂直水平居中</title>
      <style>
         .wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
         }
         img {
            border: 1px solid #ccc;
         }
      </style>
   </head>
   <body>
      <div class="wrapper">
         <img src="https://picsum.photos/id/123/400/400">
      </div>
   </body>
</html>

ログイン後にコピー

このコードスニペットでは、ラッピングレイヤー div を作成し、Flex レイアウトを使用して CSS スタイルシートにスタイルを追加します。が使用され、「justify-content: center;」は画像を水平方向に中央揃えするために使用され、「align-items: center;」は画像を垂直方向に中央揃えするために使用されます。「height: 100vh;」属性は、画像の高さに適応するために使用されます。

要約:

画像を中央に配置することは些細なことのように思えるかもしれませんが、実際の開発や設計では、これは非常に重要で一般的な問題です。この記事では、画像を中央に配置する方法として、HTML タグと CSS スタイルを使用する方法と、CSS スタイルを使用する 2 つの方法を紹介します。それぞれの方法には独自の長所と短所があり、プログラマーは実際の状況に応じて適切な方法を選択して、Web デザインの美しい効果を実現できます。

以上がHTMLで画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。