HTMLで画像を中央揃えに設定する方法

HTML では、margin 属性を使用して画像を中央に配置します。画像要素に「margin:auto」スタイルを設定するだけです。 margin 属性値が「auto」の場合、要素を中央揃えにするという目的を達成するために、要素が親コンテナの左右のマージンを均等に占めるように、ブラウザは自動的に左右のマージンを割り当てます。 。

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

Body タグの下に img タグを作成し、ドキュメントに画像を挿入します。ブラウザの左上隅に画像が表示されます。ここで引用した画像のサイズは 200*125px になります。

<img src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

img の外側に div ブロック タグを作成し、div の幅を設定してファイルを中央に配置できます margin:0 auto;

        <img src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

画像を相対位置に設定し、パーセンテージで中央に配置することもできます。

div{
        position:relative;
        left:50%;
    }

距離は次のとおりであるため、ブラウザで効果をプレビューします。左 50% の距離に設定すると、現在の画像の左側がドキュメントの中央に配置されます。

画像を中央に配置する場合は、画像を移動する必要があります。左側の画像 幅の半分なので、画像のサイズを知る必要があります。この画像のサイズは 200*125 なので、画像フレームを 100px 左に移動するだけです。外側に移動するため、マイナスを与えます。 value left:-100px; 最終的な効果は図の通りです 画像が中央に配置されています この設定後は、画面がどんなに大きくても画像が中央に表示されます。

div{
        position:relative;
        left:50%;
        margin-left: -100PX;
    }

推奨学習: html ビデオ チュートリアル

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